Brtdku

In a React project, I have a component Header.js, which is part of the global layout and is used on every page. Routing is done with React Router v4.

The Header.js component should have different children (like breadcrumbs or titles), depending on the page I'm currently on.

Example: on the HomePage.js, I want to display breadcrumbs. But on the AboutPage.js, I want to have just a title.

<App>

  <Header />



  <AnotherComponent />

  <MoreComponents />

  <BrowserRouter>

  ...

  </BrowserRouter>

</App>

I thought about making Header.js a HOC, but I can't embed it onto every page because of layout and styling reasons. It needs to be in App.js in the exact same position.

Any ideas / techniques?

EDIT: Ideally, I want to have the content of Header.js in every page, like the Helmet package does it:

<>

  {/* HomePage.js */}

  <HeaderPortal>

    <p>Content for the header</p>

  </HeaderPortal>



  <PageContent />

</>

One way to do this is by using React's context API, but you'll have to wrap pretty high in the DOM to be able to provide the setters and getters of the header content from wherever.

The Header components would look like this:

const HeaderContext = React.createContext();



// Provides the context and state - wrap app

export class HeaderProvider extends React.Component {

  state = {};

  render() {

    const { children } = this.props;

    return (

      <HeaderContext.Provider

        value={{

          header: this.state.header,

          setHeader: ({ header }) => this.setState({ header })

        }}

      >

        {children}

      </HeaderContext.Provider>

    );

  }

}

// Wrapper around WHERE the header will be rendered

export function HeaderPlacement() {

  return (

    <HeaderContext.Consumer>{({ header }) => header}</HeaderContext.Consumer>

  );

}

// Wrapper for setting the header CONTENT

export function HeaderPortal({ children }) {

  return (

    <HeaderContext.Consumer>

      {({ header, setHeader }) => 

        !header // Guard against setting the header in an endless loop

        && setHeader({ header: children })}

    </HeaderContext.Consumer>

  );

}

And then the usage would look like this:

function App() {

  return (

    <HeaderProvider>

      <div className="App">

        <HeaderPlacement />

        <Page />

      </div>

    </HeaderProvider>

  );

}



function Page() {

  return (

    <React.Fragment>

      <HeaderPortal><h1>Page A Test</h1></HeaderPortal>

      <div>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ex odio,

        eleifend in consequat nec, maximus lobortis ligula. Duis elementum, diam

        et imperdiet pulvinar, nulla ligula commodo elit, ac ullamcorper justo

        mauris quis velit. 

      </div>

    </React.Fragment>

  );

}

You'll have to be careful if multiple descendants try setting the header content, because you will either end up with a looping setState issue, or one will overwrite the other.

This is definitely not the only way, and I avoided using hooks, but this is certainly a React-y way.

Checkout the codesandbox here: https://codesandbox.io/s/pj2q10700j