react-router v6 路由统一管理及路由拦截方案

• 2022-02-18 更新：
  添加路由拦截异步处理的支持，通过拦截函数返回一个promise对象的形式使用。
• 2022-02-11 更新：
  优化路由拦截函数的使用，避免循环引用的隐患。
• 2022-01-13 更新：
  重构路由配置列表的配置方式，配置更加简便，且便于后台管理系统的项目根据路由配置自动生成导航菜单。

实现的功能：

• 全局路由统一管理，支持便捷配置路由重定向、路由懒加载、自定义meta字段等。
• 全局路由拦截，支持读取路由meta配置，支持拦截跳转其他路由等。
• 同时也支持嵌套路由、动态路由参数等官方路由原生支持的配置方式。

下面分享具体方案。

一、react-router v6

"react": "^17.0.2",
"react-router-dom": "^6.2.1"

v6版本目前网上的文章寥寥无几，实现过程基本靠自己摸索。

• 官方文档：https://github.com/remix-run/react-router/blob/main/docs/api.md
• 目前官方文档只有英文版，升级指南啥的网上能搜到中文的文章。
• 这里只提一下新增的一个api：useRoutes。
  useRoutes可以读取一个路由配置数组，生成相应的路由组件列表，类似以前的react-router-config插件的功能，那么路由统一管理的实现用这个api就简单多了。

二、路由统一管理

实现的就是路由集中在一个文件里通过数组统一管理配置。

1、路由配置文件

项目src/router/index.js里填写路由配置：

import Index from '@/views/index/index'
import Login from '@/views/login/index'
import Page404 from '@/views/test/page404'

const routes = [
  {
    path: '/index',
    element: <Index />,
  },
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '*',
    element: <Page404 />,
  },
]

export { 
  routes
}

• 这里仅作为路由统一管理配置的参考，后面配置路由拦截时会做修改。

2、引入路由配置

引用路由并渲染的核心是利用react-router v6 的官方api：useRoutes。

（1）项目入口文件src/index.js里引入router组件：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App