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.
В чем может быть проблема?