如何在反应路由器dom中动态重定向？答案

【问题标题】：How to dynamically Redirect in react router dom?如何在反应路由器dom中动态重定向？
【发布时间】：2021-09-21 02:37:34
【问题描述】：

我正在使用自定义钩子，如果用户登录则返回 true，否则返回 false。

useAuth.js

导入 { useEffect, useState } from "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;

如果已登录，我想将用户动态重定向到 /dashboard，如果未登录，我想动态重定向到 /login。

Login.jsx

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

export default Login;

Dashboard.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;

但它总是被重定向到“/login”。有什么办法解决吗？

代码沙盒链接：https://codesandbox.io/s/inspiring-joliot-h89gq?file=/src/Router.js

【问题讨论】：

嗨 Abi，<Switch /> 组件将呈现第一个匹配的子组件，因此如果您已经在 /login 或 /dashboard 上，您将永远不会被重定向到任何地方。但是，如果您导航到 /xyz 之类的路线，您将被重定向，具体取决于您的身份验证状态。
this.props.history.push('/login');
@AmirSaleem 无法读取 undefined 的属性 props
@JackGore 我想做的是，如果未通过身份验证，则重定向到 /login，如果经过身份验证，则重定向到 /dashboard
@Abi 您需要使用withRouter(MyComponent) 导出您的组件。您可以从react-router-dom使用路由器导入

标签： javascript reactjs

【解决方案1】：

@Abi 将重定向语句放在 switch 语句之外，它将起作用。有关详细信息，请参阅 github 上的此问题-https://github.com/ReactTraining/react-router/issues/6840。

【讨论】：