CODEWITHSUNDEEP
javascriptreactjs
Tajmirul Islam
Tajmirul Islam

Reputation: 55

Rendre footer component all page except 404 pages in react

I want to render the footer component to all pages except the 404 page and request timeout page. Should I add footer component to all page component individually?

Upvotes: 1

Views: 306

Answers (1)

kca
kca

Reputation: 6055

Generally: No,

Of course, if your App is very simple or has very few pages, it might be quicker and cleaner to just add the Footer where you want it.

You should have some kind of "page layout" component. (You probably already have one.)

Then you have different options to tell your app if the footer should be shown or not:

(A) Seperate layout components

You could use 2 (or 3) different specialized page layout components.

e.g:

// -- main layout --

export const MainPageLayout = (props) => {
    return (<>
        <PageHeader />
        { props.children }
    </>);
};

// -- specialized layouts --

export const NormalPageLayout = (props) => {
    return (<MainPageLayout>
        { props.children }
        <PageFooter />
    </MainPageLayout>);
};

export const ExceptionalPageLayout = (props) => {
    return (<MainPageLayout>
        { props.children }
    </MainPageLayout>);
};

// -- pages --

export const ExamplePage = (props) => {
    return (
        <NormalPageLayout>
            <h1>example page</h1>
            <div>example page content</div>
        </NormalPageLayout>
    );
};

export const Page404 = (props) => {
    return (
        <ExceptionalPageLayout>
            <h1>404</h1>
            <div>not found</div>
        </ExceptionalPageLayout>
    );
};

(B) use a prop

You could use the same page layout component with e.g. a "page type" property.

Even if this is shorter, I would generally not recommend this solution, because IMO it is less declarative, but I must admit that I have trouble to reason this.

e.g:

// -- layout --

export const MainPageLayout = (props) => {
    return (<>
        <PageHeader />
        { props.children }
        { props.pageType === 'exceptional'
            ? null
            : <PageFooter />
        }
    </>);
};

// -- pages --

export const ExamplePage = (props) => {
    return (
        <MainPageLayout>
            <h1>example page</h1>
            <div>example page content</div>
        </MainPageLayout>
    );
};

export const Page404 = (props) => {
    return (
        <MainPageLayout pageType={ 'exceptional' }>
            <h1>404</h1>
            <div>not found</div>
        </MainPageLayout>
    );
};

Upvotes: 1

Related Questions