React-router-Dom：在 React 中重定向多个用户登录后的空白页面

我的反应项目中有两个（用户和管理员）用户，我想在成功登录后将他们重定向到他们受尊重的页面。为了实现这一目标，我创建了一个名为的独立组件authenticatedRoute.js并通过 AuthenticatedRoute 组件包装这些组件。这是代码

AuthenticatedRoute.js

import { useHistory } from "react-router-dom";
import { Route } from "react-router-dom";

const AuthenticatedRoute = ({ children, ...rest }) => {
  const history = useHistory();
  var tokenn = JSON.parse(localStorage.getItem("desta"));
  var user_type = tokenn?.user.roles[0]; //USER or ADMIN
  var loggedIn = tokenn?.user_status; //true
  const redirect = () => {
    try {
      switch (user_type) {
        case "USER":
          return [history.push("/user"), children];
        case "ADMIN":
          return [history.push("/admin"), children];
        default:
          console.log("redirect");
      }
    } catch (err) {
      return [history.push("/signin"), children];
    }
  };

  return (
    <Route
      render={() => {
        return loggedIn ? redirect() : history.push("/signin");
      }}
    />
  );
};

export default AuthenticatedRoute;

App.js（最少代码）

import "./App.css";
import Header from "./components/Header/Header";
import HeaderLinks from "./components/Header/HeaderLinks";
import Hero from "./components/Header/Hero/Hero";
import Login from "./components/auth/Login";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  useHistory,
} from "react-router-dom";
import SignUp from "./components/auth/SignUp";
import ViewUserProfile from "./components/Admin/ViewUserProfile";
import AdminHeader from "./components/Admin/AdminHeader";
import ManageBusinessType from "./components/Admin/ManageBusinessType";
import ManageCompany from "./components/Admin/ManageCompany";
import UserDashboard from "./components/Users/UserDashboard";
import ViewProfile from "./components/Users/ViewProfile";
import { ResetPassword } from "./components/Users/ResetPassword";
import ChangePassword from "./components/Users/ChangePassword";
import { useEffect } from "react";
import AuthenticatedRoute from "./components/auth/authRoute/AuthenticatedRoute";

function App() {
  return (
    <Router>
      <Switch>
        <AuthenticatedRoute path="/" exact>
          <Hero />
        </AuthenticatedRoute>
        <AuthenticatedRoute path="/admin" exact>
          <AdminHeader />
        </AuthenticatedRoute>
        <AuthenticatedRoute path="/user" exact>
          <UserDashboard />
        </AuthenticatedRoute>
      </Switch>
    </Router>
  );
}

export default App;

成功登录后，它会将我重定向到正确的用户角色页面，但它是空页面，如下图所示。

我该如何解决这个问题？I used [电子邮件受保护] Thanks

您正在渲染导航操作的结果而不是 JSX。AuthenticatedRoute应该渲染一个Route渲染路由内容或Redirect到适当的路径。

Example:

If loggedIn是 falsey，然后重定向到"/signin"，否则检查路由应该有权访问的角色，如果角色匹配则渲染一个Route传递道具，否则重定向到适当的用户/管理员路径。

import { useHistory } from "react-router-dom";
import { Route } from "react-router-dom";

const AuthenticatedRoute = ({ roles, ...props }) => {
  const tokenn = JSON.parse(localStorage.getItem("desta"));
  const user_type = tokenn?.user.roles[0]; //USER or ADMIN
  const loggedIn = tokenn?.user_status; //true

  return loggedIn
    ? roles.includes(user_type)
      ? <Route {...props} />
      : <Redirect to={user_type === "USER" ? "/user" : "/admin"} />
    : <Redirect to="/signin" />;
};

export default AuthenticatedRoute;

指定访问路由的角色。

function App() {
  return (
    <Router>
      <Switch>
        <AuthenticatedRoute path="/admin" roles={["ADMIN"]}>
          <AdminHeader />
        </AuthenticatedRoute>
        <AuthenticatedRoute path="/user" roles={["USER"]}>
          <UserDashboard />
        </AuthenticatedRoute>
        <Route path="/">
          <Hero />
        </Route>
      </Switch>
    </Router>
  );
}