React BrowserRouter не работает

Проблема в следующем

В основном файле App.js используется BrowserRouter. Для передачи в него роутов написан хук, который возвращает набор роутов, в зависимости от аутентификации пользователя.

App.js:

function App() {
  const { login, logout, token, userId } = useAuth()
  const isAuthenticated = !!token
  const routes = useRoutes(isAuthenticated)
  return (
    <AuthContext.Provider value={{ token, login, logout, userId, isAuthenticated }}>
      <BrowserRouter>
        <div className="container">
          {routes}
        </div>
      </BrowserRouter>
    </AuthContext.Provider>
  )
}

routes.js:

export const useRoutes = isAuthenticated => {
    if (isAuthenticated) {
        return (
            <Switch>
                <Route path="/links" exact>
                    <LinksPage />
                </Route>
                <Route path="/create" exact>
                    <CreatePage />
                </Route>
                <Route path="/detail/:id">
                    <DetailPage />
                </Route>
                <Redirect to="/create" />
            </Switch>
        )
    }

    return (
        <Switch>
            <Route path="/" exact>
                <AuthPage />
            </Route>
            <Redirect to="/" />
        </Switch>
    )
}

При передаче в хук useRoutes значения true в фале App.js роуты работают верно. Но если передать isAuthenticated (который также равен true), роуты перестают работать и рендерится всегда та страница, которая указана в Redirect.

В чем может быть проблема?


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