一、概述

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,
        component:lazy(() => import('../page/error/NotFound'))
      }
    ]
  },
  { 
    path: '*',
    auth:false,
    component:lazy(() => import('../page/error/NotFound'))
  }
]

//根据路径获取路由
const checkAuth = (routers:any, path:String)=>{
  for (const data of routers) {
    if (data.path==path) return data
    if (data.children) {
      const res:any = checkAuth(data.children, path)
      if (res) return res
    }
  }
  return null
}

// 路由处理方式
const generateRouter = (routers:any) => {
  return routers.map((item:any) => {
    if (item.children) {
      item.children = generateRouter(item.children)
    }
    item.element = <Suspense fallback={
      <div>加载中...</div>
    }>
      {/* 把懒加载的异步路由变成组件装载进去 */}
      <item.component />
    </Suspense>
    return item
  })
}

const Router = () => useRoutes(generateRouter(routes))
const checkRouterAuth = (path:String)=>{
  let auth = null
  auth = checkAuth(routes,path)
  return auth
}
export{ Router,checkRouterAuth}

路由嵌套

        v6中提供Outlet组件，用于预留坑渲染嵌套路由页面，是开发更加简单便捷

import './portal.scss'
import LeftSide from './LeftSide'
import TopHeader from './TopHeader'
import RouterBeforeEach from './../../routes/RouterBeforeEach'

const Portal =()=>{
  return (
    <div className="portal">
      <div className="portal-left">
        <LeftSide/>
      </div>
      <div className="portal-right">
        <TopHeader></TopHeader>
        <RouterBeforeEach/>
      </div>
    </div>
  );
}

export default Portal

import {useNavigate,useLocation,useResolvedPath } from "react-router-dom";
import { Outlet } from 'react-router-dom'
import {checkRouterAuth} from './index'
import {useEffect,useState} from 'react'
const RouterBeforeEach = ()=>{
  const navigate = useNavigate()
  const location = useLocation()
  const [auth,setAuth] = useState(false)
  useEffect(()=>{
    let obj = checkRouterAuth(location.pathname)
    let blLogin =sessionStorage.getItem('login')
    if(obj && obj.auth && blLogin=='false'){
      setAuth(false)
      navigate('/', {replace: true})
    }else{
      setAuth(true)
    }
  },[])
  return auth?<Outlet/>:null
} 

export default RouterBeforeEach

在挂在处渲染路由页面

import ReactDOM from 'react-dom';
import {BrowserRouter} from "react-router-dom";
import './index.css';
import {Router} from './routes/index'
ReactDOM.render(
  <BrowserRouter>
    <Router/>
  </BrowserRouter>,
  document.getElementById('root')
);

至此页面路由配置就完成了，相比以往版本的方式简单了许多。对新手更加的友好，特别对Vue的发开人员转向更加的友好

二、路由鉴权

        这里我新建了一个RouterBeforeEach组件，在渲染嵌套路由的时候，对需要鉴权的路由进行判断，不满足则跳转到登录页。

import {useNavigate,useLocation,useResolvedPath } from "react-router-dom";
import { Outlet } from 'react-router-dom'
import {checkRouterAuth} from './index'
import {useEffect,useState} from 'react'
const RouterBeforeEach = ()=>{
  const navigate = useNavigate()
  const location = useLocation()
  const [auth,setAuth] = useState(false)
  useEffect(()=>{
    let obj = checkRouterAuth(location.pathname)
    let blLogin =sessionStorage.getItem('login')
    if(obj && obj.auth && blLogin=='false'){
      setAuth(false)
      navigate('/')
    }else{
      setAuth(true)
    }
  },[])
  return auth?<Outlet/>:null
} 

export default RouterBeforeEach

三、路由参数获取

import {useSearchParams,useLocation ,useParams } from "react-router-dom";
const Test = ()=>{
  const [searchParams, setSearchParams] = useSearchParams()
  console.log(searchParams.get('id'))
  const params = useParams()
  const location =useLocation()
  console.log(params)
  console.log(location)
  return(
    <>
      测试
    </>
  )
}

export  default Test

最终效果