Блог

Главная - Вопросы по программированию - Как динамически перенаправлять в react router dom?

Как динамически перенаправлять в react router dom?

#javascript #reactjs

Вопрос:

Я использую пользовательский хук, который возвращает true, если пользователь вошел в систему, иначе вернет false.

useAuth.js

импорт { useEffect, useState } из «react»;

 const useAuth = () => {
  const [isAuth, setIsAuth] = useState();
  useEffect(() => {
    setIsAuth(localStorage.getItem("auth"));
  }, []);

  if (!!isAuth) {
    console.log("Auth", isAuth);
    return true;
  }
  return false;
};

export default useAuth;

Я хочу динамически перенаправлять пользователей на /панель мониторинга, если они вошли в систему, или /войти, если они не вошли в систему.

Войдите в систему.jsx

 const Login = () => {
  function onLogin() {
    localStorage.setItem("auth", "token");
  }
  return <button onClick={onLogin}>Login</button>;
};

export default Login;

Панель мониторинга.jsx

 const Dashboard = () => {
  return <h1>Dashboard</h1>;
};

export default Dashboard;

У меня есть отдельный файл для обработки маршрутизации

Router.js

 import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
import useAuth from "./useAuth";
import Dashboard from "./Dashboard";
import Login from "./Login";

const Router = () => {
  const isAuth = useAuth();

  const routes = [
    {
      path: "/login",
      component: Login,
    },
    {
      path: "/dashboard",
      component: Dashboard,
    },
  ];
  return (
    <>
      <BrowserRouter>
        <Switch>
          {routes.map((route) => {
            return (
              <Route
                key={route.path}
                exact
                path={route.path}
                component={route.component}
              />
            );
          })}
          <Redirect to={isAuth ? "/dashboard" : "/login"} />
        </Switch>
      </BrowserRouter>
    </>
  );
};

export default Router;

Но он всегда перенаправляется на «/вход». Есть какой-нибудь способ решить эту проблему?

Ссылка на Codesandbox : https://codesandbox.io/s/inspiring-joliot-h89gq?file=/src/Router.js

Комментарии:

1. Привет, Аби, <Switch /> компонент отобразит первого соответствующего ребенка, поэтому, если вы уже /login подключены к одному из них, или /dashboard вы никогда никуда не будете перенаправлены. Если вы перейдете на такой маршрут, как /xyz вы, однако, будете перенаправлены в зависимости от вашего статуса аутентификации.

2. this.props.history.push('/login');

3. @AmirSaleem не может считывать реквизиты неопределенных свойств

4. @JackGore То, что я хотел сделать, это перенаправить на /войти, если не аутентифицирован, и на /панель мониторинга, если аутентифицирован

5. @Abi, с помощью которого вам необходимо экспортировать свой компонент withRouter(MyComponent) . Вы можете импортировать с помощью маршрутизатора из react-router-dom

Ответ №1:

@Abi Разместите оператор перенаправления вне оператора переключения, он будет работать. для получения дополнительной информации см. Этот выпуск на github — https://github.com/ReactTraining/react-router/issues/6840.

Метки: