@eswifft

Как правильно вывести роуты в зависимости от условия в React?

Столкнулся с такой проблемой в написании аутентификации.

В зависимости от переменной, отвечающей за аутентификацию пользователь получает определенный набор роутов. Но в момент первоначальной загрузки, когда переменная еще не получила значение из redux стора, выводятся роуты для не залогининого пользователя, т.е. страница регистрации, а уже только потом нужные страницы.

Получается, что каждый раз при обновлении мелькает страница регистрации.

Код для routes.js:
export const RotesPage = ({ isAuthenticated }) => {
  if (isAuthenticated) {
    return (
      <div>
        <Switch>
          <Route path="/" exact>
            <MainPage />
          </Route>
          <Route path="/schedule" exact>
            <SchedulePage />
          </Route>
          <Route path="/tasks" exact>
            <TasksPage />
          </Route>
          <Route path="/money" exact>
            <MoneyPage />
          </Route>
          <Redirect to="/" />
        </Switch>
      </div>
    );
  }

  if (!isAuthenticated) {
    return (
      <Switch>
        <Route path="/login" exact>
          <LoginPage />
        </Route>
        <Route path="/register" exact>
          <RegisterPage />
        </Route>
        <Redirect to="/login" />
      </Switch>
    );
  }
};


Сам App.js:
import React, { useEffect } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { loadUser } from "./actions/authAction"; 
import { AppNavbar } from "./layouts/components/AppNavbar";
import { RotesPage } from "./routes";

const App = () => {
  const dispatch = useDispatch(); 
  const auth = useSelector((state) => state.auth);
  const isAuthenticated = auth.isAuthenticated;

  useEffect(() => {
    dispatch(loadUser());
  }, [dispatch]);

  return (
    <Router>
      {isAuthenticated && <AppNavbar />}
      <RotesPage isAuthenticated={isAuthenticated} />
    </Router>
  );
};

export default App;


Как пофиксить это дело?
  • Вопрос задан
  • 62 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Che603000
c 2011 javascript
У вас код работает правильно. Переменная isAuthenticated инициализируются после асинхронного вызова loadUser. Поэтому при старте приложения пользователь ещё не авторизован и isAuthenticated в store равно false.
Исправьте логику. Варианты
1) вызов loadUser может быть синхронным
2) показывайте первую страницу одинаковую для всех пользователей.
3) запускайте роутер после получения ответа на loadUser
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы