using useEffect in combination with Axios fetching API data returns null - how to deal with this?

What you are asking would be bad for UIs. You don't want to block the UI rendering when you're fetching data. So the common practice is showing a Loading spinner or (if you're counting on the request being fast) just rendering nothing until it pops up.

So you would have something like:

const About = () => {
    const [isLoading, about] = useHttp(PAGE_ABOUT, []);

    if (isLoading) return null; // or <Loading />

    return (
       <section className="about">
            <div className="row">
                <Header
                    featuredImage={API_URL + about.page_featured_image.path}
                    authorImage={API_URL + about.page_author_image.path}
                    authorImageMeta={about.page_author_image.meta.title}
                    title={about.about_title}
                    subtitle={about.about_subtitle}
                />

                <Main
                  title={about.page_title}
                  content={about.page_content}
                />

                <Aside
                  title={about.about_title}
                  content={about.about_content}
                />
            </div>
        </section>
    );
};

If your api has no protection for errors and you're afraid of about being null or undefined you can wrap the component with an Error Boundary Component and show a default error. But that depends if you use those in your app.

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.