Настройка роутинга в React

Стоит задача при изменении некой переменной показывать различные компоненты. По сути авторизация, при успехе которой пользователю открывается админка. Сейчас сделано так: В 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, он не изменяется, но открывается тот компонент что находится по адресу '/'. А вот если нажать в меню еще раз по ссылке этого компонента, то адрес уже изменяется. Подскажите, что делаю не так?


Ответы (0 шт):