CODEWITHSUNDEEP
javascriptreactjs
seanrs97
seanrs97

Reputation: 333

What is the best approach to build a react app with a large amount of component pages?

I've been tasked with building an application in ReactJS that will have roughly 70 - 100 pages / subpages. So far I've tried building this so each page is it's own component i.e. mainPage.js , subPage1.js, subPage2.js etc. but in the long run there will be far too many pages to maintain. Many of the pages follow the same structure like the code below, but each page will of course have it's own unique data. <Header> <Main Content> <Footer>

So my question is, is there a way to dynamically create pages in React or a way of creating component pages so that I don't have to create a seperate page for every single different page?

Upvotes: 0

Views: 929

Answers (1)

Drew Reese
Drew Reese

Reputation: 202721

Use react component composition. Sounds like you've already some header, content, footer components. You should categorize the types of pages your app uses and create general purpose container components for each use-case.

For example, a "base" or "first-level" page component could look like:

const Page = ({ pageHeaderProps, pageFooterProps, ...props }) => (
  <Page.Container>
    <Page.Header {...pageHeaderProps} />
    <Page.Content {...props} />
    <Page.Footer {...pageFooterProps} />
  </Page.Container>
);

Here the children prop is spread into the (or wrapped by) Content component.

If for example some sub-pages have an additional sub-header or some other common component, then you can compose a component as:

const SubPage = ({ children, subHeaderProps, ...props }) => (
  <Page {...props}>
    <SubHeader {...subHeaderProps} />
    {...children}
  </Page>
);

Here the new SubHeader is injected as a child of the Page and will be rendered as part of all the children it renders.

Upvotes: 2

Related Questions