Javascript 如何在 React 中使用 useRoutes 钩子来创建私有路由

要使用useRoutes挂钩创建私有和公共路由，您可以使用一个定制组件来判断用户的身份验证状态，并呈现适当的元素或重定向到登录页面.例如，您可以创建一个PrivateRoute组件，如下所示:

import { Navigate, useLocation } from "react-router-dom";
import { useContext } from "react";
import { AuthContext } from "../contexts";

export default function PrivateRoute({ element }) {
  const { sessionContextValue } = useContext(AuthContext);
  const { isAuth } = sessionContextValue;
  const location = useLocation();

  return isAuth ? (
    element
  ) : (
    <Navigate to="/login" state={{ from: location }} replace />
  );
}

然后，您可以在路由数组中使用此组件，如下所示:

import Home from "../pages/home";
import Items from "../pages/items";
import Login from "../pages/login";
import Printers from "../pages/printers";
import { useRoutes } from "react-router-dom";
import PrivateRoute from "./PrivateRoute";

function Routes() {
  const routes = [
    {
      path: "/",
      element: <PrivateRoute element={<Home />} />,
    },
    {
      path: "/printers",
      element: <PrivateRoute element={<Printers />} />,
    },
    {
      path: "/items",
      element: <PrivateRoute element={<Items />} />,
    },
    {
      path: "/login",
      element: <Login />,
    },
  ];

  let router = useRoutes(routes);
  return router;
}

export default Routes;