如何为访客用户页面创建路由？

Question

我有一个中央路由配置文件，该文件包含所有路由。到目前为止，路由配置包括我仪表板页面的路由。这就是它的样子：

const routes = [
  {
    type: "collapse",
    name: "Dashboards",
    key: "dashboards",
    icon: <Icon fontSize="small">dashboard</Icon>,
    noCollapse: "true",
  },
  {
    type: "collapse",
    name: "Tools",
    key: "apps",
    icon: <Icon>apps</Icon>,
    collapse: [
      {
        name: "First Page",
        key: "first",
        icon: <Icon>apps</Icon>,
        href: `first_page`,
      },
      {
        name: "Second Page",
        key: "second",
        route: "/",
        component: <SecondPage/>,
      },
      {
        name: "Third Page",
        key: "third",
        icon: <Icon>table</Icon>,
        href: `third_page`,
      },
    ],
  },
  {
    type: "collapse",
    name: "Settings",
    key: "settings",
    icon: <Icon>settings</Icon>,
    href: `settings`,
    noCollapse: true,
  },
  {
    type: "collapse",
    name: "Sign Out",
    key: "signout",
    icon: <Icon>logout</Icon>,
    href: `sign_out`,
    noCollapse: true,
  },
];

这就是我在app.js中渲染路由的方式：

      <Routes>
        {getRoutes(routes)}
        <Route path="*" element={<Navigate to="/" />} />
      </Routes>

这就是我在routes list上循环的方式：

  const getRoutes = (allRoutes) =>
    allRoutes.map((route) => {
      if (route.collapse) {
        return getRoutes(route.collapse);
      }
      if (route.route) {
        return <Route exact path={route.route} element={route.component} key={route.key} />;
      }
      return null;
    });

我想添加一个宾客用户表格的新路线可以由未经身份验证的用户访问，这意味着他们应该无法访问仪表板页面。但是我不确定它是否应嵌套在路由配置文件中，否则我应该在app.js中这样创建

      <Routes>
        {getRoutes(routes)}
        <Route
          exact
          path="/guest_user"
          element={<GuestUser/>}
          key={"guest"}
        />
        <Route path="*" element={<Navigate to="/" />} />
      </Routes>

它说明目的。

Answer 1

您可以创建一个 preectedRoute .js文件/文件夹，您可以在其中编写如下的逻辑。

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";

function ProtectedRoute(props) {
  // eslint-disable-next-line react/prop-types
  const { Component } = props;
  const navigate = useNavigate();
  useEffect(() => {
    const token = localStorage.getItem("token");
    // eslint-disable-next-line no-console
    if (!token) {
      navigate("/");
    }
  });
  return <Component {...props} />;
}

export default ProtectedRoute;

之后，您可以在路线数组中进行以下更改这样。

{
    type: "collapse",
    name: "Profile",
    key: "profile",
    icon: <Icon fontSize="small">person</Icon>,
    route: "/profile",
    component: <ProtectedRoute Component={Profile} />,
  },

可以在preectedRoute.js中添加其他功能，例如基于角色等。