'React router dom add headers and dashboard for certain routes
I am using react router dom Version 5 in my react version 15 application, I want to know how I can display the page header and the dashboard in all the pages except the authentication and the sign up pages.
I tried to do a test on the pathname but I always had a lag when I change pages or when I try to disconnect, I have to refresh the page each time. Here's my code :
<Router>
{pathname !=='/' && pathname !== '/sign-in' && pathname !== '/sign-up' &&
<>
<Header></Header>
<Dashboard ></Dashboard>
</>
}
<Switch>
<Route exact path='/' component={SignIn} />
<Route path="/sign-in" component={SignIn} />
<Route path="/sign-up" component={SignUp} />
{
sessionStorage.getItem("token") === null ?
<Redirect to='/sign-in'/> :
<>
<Route path="/home" component={Home} />
<Route path="/management" component={Management} />
<Redirect to='/home'/> :
</>
}
</Switch>
</Router>
EDIT : I'm trying with render inside route tag ,It's worked fine. But, I would like to optimize my code :
<Router>
<Switch>
<Route exact path='/' component={SignIn} />
<Route path="/sign-in" component={SignIn} />
<Route path="/sign-up" component={SignUp} />
{
sessionStorage.getItem("token") === null ?
<Redirect to='/sign-in'/> :
<>
<Route path="/home" render={() =><> <Header/>
<Dashboard/><Home/></>} />
<Route path="/management" render={() =><> <Header/>
<Dashboard /><Management/></>} />
<Redirect to='/home'/> :
</>
}
</Switch>
</Router>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
