Как правильно настроить роутинг в React router v6?

Question

[SabAlex]

Всем доброго дня.
Коллеги, как правильно выполнить настройку роутинга, если необходимо перенаправлять пользователя в личный кабинет в зависимости от его статуса?

Т.е. в приложении есть не авторизированный пользователь, есть админ и есть простой авторизированный пользователь. пока тренируюсь на локале, по этому просто по клику на кнопку меняю поле auth объекта isAuth на true и ставлю в поле user статус admin или user.

Вот так выглядит роутинг:

const Navigation = () => {

    const {isAuth} = useContext(AuthContext)
  return (
    
      
        isAuth.auth
        ?
          isAuth.user === 'admin' 
          ?
          <Routes>
          <Route path="/admin/*" element={<AdminCabinet />} />
          <Route path='*' element={<Navigate replace to="/admin" />}/>
        </Routes>
          :
          <Routes>
          <Route path="/lk" element={<UserCabinet />} />
          <Route path='*' element={<Navigate replace to="/lk" />}/>
        </Routes>
        :
        <Routes>
          <Route path="/" element={<MainPage />} />
          <Route path='*' element={<Navigate replace to="/" />}/>
        </Routes>
    );
};

Когда нажимаю вход все работает, в личные кабинеты система заходит. Но, если выйти из кабинетов и потом обновить страницу, то мы попадает по пути /lk. Хотя isAuth в это время стоит false. Как я понимаю, тернарный оператор нельзя так использовать. Но как тогда корректно отследить несколько состояний, если надо из 3 различных роутов выбирать? И как правильно сделать роутинг между админом, пользователем и не зарегистрированным человеком, если им всем разные страницы надо показывать?

Answer 1

[Игорь Махов]

Вы не совсем правильно понимаете что такое Route. Он представляет собой просто if-then, который определяет, какой элемент нужно отрендерить в зависимости от пути в адресной строки. Перенаправления он не выполняет. Чтобы перенаправить пользователя, нужно при определенных условиях отрендерить Navigate

Comments

[SabAlex]

А разве вот тут я не это делаю?

<Route path='*' element={<Navigate replace to="/admin" />}/>

Если пользователь залогинился как администратор - проблем нет, я могу сколько угодно перезагружать страницу, и переходить куда угодно, юзер всегда будет в рамках /admin/. То есть перенаправление работает.

А вот если мы разлогинились, т.е. isAuth.auth = false , мы сперва попадаем на
<Route path="/" element={<MainPage />} />
но при обновлении страницы нас почему то перекидывает в /lk, хотя он по условиям не должен выводиться в принципе.