I have 3 pages in my React App along with the following routes:
I would like the Dashboard and Project pages to have a header, but the Login page should not have any header.
Currently the routes look like this:
<Router>
<Route path="/" component={Login}>
<Route path="/dashboard" component={Dashboard} />
<Route path="/projects" component={Projects} />
</Router>
I have created a component called Shell which provides just the header. How do I setup my router so that Shell is parent component for Dashboard and Projects but not the Login page?
Edit 1
I am wondering if it is possible to use a pathless parent like this to render the Shell around the child components:
<Router>
<Route path="/" component={Login}>
<Route component={Shell}>
<Route path="/dashboard" component={Dashboard} />
<Route path="/projects" component={Projects} />
</Route>
</Router>
Edit 2
Just tried the change above and it works! Reading the docs, path is not a required prop. So in the code above <Route component={Shell}> is perfectly legit.
What you have in Edit 1 is correct.
<Router>
<Route component={Login}>
<Route component={Shell}>
<Route path="/dashboard" component={Dashboard} />
<Route path="/projects" component={Projects} />
</Route>
</Router>
And in your <Shell> component, you can do:
import Header from './Header';
...
render() {
return (
<div id="shell">
<Header />
{this.props.children}
</div>
);
}
...