react-router-dom v6.0新特性及路由守卫

一、概述

v6相比v5,做了很多的优化。包括书写上更加的便捷，更加体现组件化思想。以往在处理路由嵌套和鉴权方面，v5的写法都靠各自开发人员去实现相对比较参差不齐。一下针对v6的配置做简单的介绍。

二、useRoutes

v6中路由的设置采用hook的方式，有点像vue的router的实例化。

import {useRoutes} from "react-router-dom";
import { Suspense, lazy } from 'react'
const routes = [
  {
    path: '/',
    auth:false,
    component:lazy(() => import('./../page/login/Login'))
  },
  {
    path: '/Portal',
    auth:true,
    component:lazy(() => import('../page/portal/Portal')),
    children: [
      { 
        path: '/Portal/Home',
        auth:true,
        component:lazy(() => import('../page/home/Home'))
      },
      { path: '/Portal/Test/:id',
        auth:true,
        component:lazy(() => import('../page/test/Test'))
      },
      { 
        path: '/Portal/*',
        auth:false,
        comp