Стоит задача при изменении некой переменной показывать различные компоненты. По сути авторизация, при успехе которой пользователю открывается админка. Сейчас сделано так: В App.js я проверяю переменную успешной авторизации и произвожу в зависимости от нее рендер нужных компонентов:
let routes= (
<Switch>
<Route path="/login" component={Authorization}/>
<Redirect to='/login' />
</Switch>
)
if(this.props.isAuthenticated){
routes = (
<Switch>
<Route path="/logout" component={Logout} />
<Route path="/" component={Layout}/>
<Redirect to='/'/>
</Switch>
)
}
Внутри компонента Layout у меня просто подключаются 3 основных части приложения:
return(
<div className={classes.Layout}>
<Header />
<Main />
<Footer/>
</div>
)
В Header меню со ссылками, а в Main я вывожу нужный раздел приложения:
<div className={classes.Main}>
<div className="container">
<Switch>
<Route path="/details" component={Details}/>
<Route path="/requests" component={Requests}/>
<Route path="/users" component={Users}/>
<Route path="/" component={About}/>
</Switch>
</div>
</div>
И проблема следующая: с авторизации я попадаю в личный кабинет, но в строке остаётся адрес /login, он не изменяется, но открывается тот компонент что находится по адресу '/'. А вот если нажать в меню еще раз по ссылке этого компонента, то адрес уже изменяется. Подскажите, что делаю не так?
exact
надо добавить для каждого роута.