react-router V6 版本的使用（自己封装了 Redirect，使用 useRoute 等）

react-router V6 版本的使用（自己封装了 Redirect等）

IndexRouter.js 使用useRoute 做全局路由的搭建，包括嵌套路由，路由重定向，路由拦截（自己封装），路由懒加载（做了一个简单的封装）等

import React from 'react';
import {useRoutes} from "react-router-dom";
import LazyLoad from "./Lazyload";
import NewsSandBox from "../views/NewsSandBox/NewsSandBox";
import AuthComponent from "./AuthComponent";

function IndexRouter(props) {
  const routerElement = useRoutes([
    //  重定向操作
    {
      path: "/",
      element: <AuthComponent>
        <NewsSandBox></NewsSandBox>
      </AuthComponent>,

      children:[
        //  二级路由的重定向
        {
          path:"/",
          element:  LazyLoad("/home/Home")
        },


        {
          path: "home",
          element: LazyLoad("/home/Home")
        },

        {
          path: "user-manage",
          element: LazyLoad("/userlist/Userlist"),
          children:[
            {
              path: "",
              element: LazyLoad("/userlist/Userlist")
            },
            {
              path: "list",
              element: LazyLoad("/userlist/Userlist")
            }
          ]
        },

        {
          path: "right-manage",
          // element: LazyLoad("/rolelist/Rolelist"),
          children: [
            {
              path: "role",
              element: LazyLoad("/right-manage/rolelist/Rolelist"),
              children:[
                {
                  path: "",
                  element: LazyLoad("/right-manage/rolelist/Rolelist"),
                },
                {
                  path: "list",
                  element: LazyLoad("/right-manage/rolelist/Rolelist"),
                }
              ]
            },
            {
              path: "right",
              element: LazyLoad("/right-manage/rightlist/Rightlist"),
              children:[
                {
                  path: "",
                  element: LazyLoad("/right-manage/rightlist/Rightlist"),
                },
                {
                  path: "list",
                  element: LazyLoad("/right-manage/rightlist/Rightlist"),
                }
              ]
            }
          ]
        },

        // 配置 无权限（404）
        {
          path: "*",
          element: LazyLoad("/nopermission/Nopermission"),
        }


      ]

    },

    {
      path: "/login",
      element: LazyLoad("/login/Login")
    },


    {
      path: "/sandbox",
      element: LazyLoad("/NewsSandBox/NewsSandBox"),
    }

  ]);


  return (
      routerElement
  );

}

function IsAuth() {
  return localStorage.getItem("token") ? true : false;
}

export default IndexRouter;

AuthComponent.js 实现路由拦截，看有没有 token，有token正常访问，没有 token 进入 login 页面

import Redirect from "./Redirect";
function AuthComponent({children}) {
  const isLogin = localStorage.getItem("token");
  return isLogin ? children : <Redirect to="/login"/>
}

export default AuthComponent;

LazyLoad.js ：因为只使用 React.lazy 的话，会报警告，需要搭配 Suspense 中的fallback 使用，所以就进行了简单封装

// 路由懒加载的封装
import React from "react";


const LazyLoad = (path) => {
  const Comp = React.lazy(() => import('../views'+path));
  return(
      <React.Suspense fallback={<>加载中</>}>
        <Comp></Comp>
      </React.Suspense>
  )
}

export default LazyLoad

Redirect.js ：V6版本移除了 Redirect ，所以为了使用方便，封装了一个简单的 Redirect

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

function Redirect({to}) {
  const navigate = useNavigate();
  useEffect(() => {
    navigate(to, {replace: true});
  })
  return null;
}

export default Redirect;