0

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

4
  • exact надо добавить для каждого роута.
    – Randall
    15 мая 2020 в 12:58
  • добавил exact на компоненты которые в main и на <Route path="/login" exact component={Authorization}/> - не помогло. А если вешаю exact еще и на <Route path="/" component={Layout}/> - то открывается компонент по '/' который, а остальные не переключаются. 15 мая 2020 в 13:08
  • А можно ссылку на codesandbox?
    – Randall
    15 мая 2020 в 13:17
  • не перетащу туда весь проект, но вот перенес часть файлов которые как раз за компоненты отвечают. Так как стора нету проект сейчас с ошибкой, но думаю чтобы понять смысл этого хватит. codesandbox.io/s/new-fast-lj218 15 мая 2020 в 13:34

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Посмотрите другие вопросы с метками или задайте свой вопрос.