Using Header globally in react using react-router-dom

Question

I am currently using react-router-dom to create navigation within my web app.

My index.js and App.js look like:

Index.js

ReactDOM.render(
    <BrowserRouter>
        <Provider store={store}>
            <App />
        </Provider>
    </BrowserRouter>,
    document.getElementById('root')
);

App.js

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Route exact path ='/' component={Home} />
          <Route path ='/container' component={Container} />
          <Route path ='/profile' component={ProfilePage} />
        </div>
      </BrowserRouter>
    );
  }
}

I idea was that if Home contains the header and the sidebar, it would also keep it for other components like Container and ProfilePage.

My Home's render looks like:

  render() {
    return (
      <div>
        <Header />
        <div className="App">
          <Sidebar />
          <Container className="container-comp" />
          {this.renderLoggingOutput()}

        </div>
      </div>
    );
  }

But when I Link to /profile, it just shows me the ProfilePage component without the header and the sidebar.

Any help?

Aluminium22 · Accepted Answer · 2019-08-29 20:22:56Z

Put your header outside the routes:

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
       <Header /> <-------- place here or outside the routes at a minimum
        <div>
          <Route exact path ='/' component={Home} />
          <Route path ='/container' component={Container} />
          <Route path ='/profile' component={ProfilePage} />
        </div>
      </BrowserRouter>
    );
  }
}

I have a similar structure in one of my apps. the routes look like this:

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Navbar />
          <Switch>
            <Route exact path='/' component={Dashboard}/>
            <Route path='/character/:id' component={CharacterDetails}/>
            <Route path='/encounter/:id' component={Encounter}/>
.........
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

Andrew · Accepted Answer · 2019-08-29 20:22:43Z

2

The only job of a route is to mount a component. If you want omnipresent components across all routes, treat the routes as children to a base component.

class App extends React.Component {
  render() {
    <div>
      <Header />
      <Sidebar />
      {this.props.children}
    </div>
  }
}

const Routes = () => (
  <App>
    {/* your routes here */}
  </App>
)

answered Aug 29, 2019 at 20:22

Andrew

7,5855 gold badges28 silver badges35 bronze badges

2 Comments

Dawn17 Over a year ago

Do we put {this.Routes} or this.props.children? Cuz the this.props.children doesn't actually use Routes

technogeek1995 Over a year ago

You would put this.props.children. this.props.children is a special prop in react. With this.props.children, whatever you put in between <App> in the Routes will show up where this.props.children is in your App component. You can read more about it in the docs.

Collectives™ on Stack Overflow

Using Header globally in react using react-router-dom

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related