React Router中useRoutes()方法的使用

运用场景

当我们需要路由权限控制点时候, 对路由数组做一些权限的筛选过滤。这时需要把路由进行集中式管理。所谓的集中式路由配置就是用一个数组统一把所有的路由对应关系写好替换本来的Roues组件，便于管理路由，更加灵活。

原来的路由写法

import {BrowserRouter, Routes, Route} from 'react-router-dom'

import Layout from './Layout.jsx'
import Login from './Login.jsx'
import Board from './Board.jsx'
import Article from './Article.jsx'
import NotFound from './NotFound.jsx'

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<Board />} />
      <Route path="article" element={<Article />} />
    </Route>
    <Route path="*" element={<NotFound />}></Route>
  </Routes>
</BrowserRouter>

useRoutes()写法

import {BrowserRouter, useRoutes} from 'react-router-dom'

import Layout from './Layout.jsx'
import Login from './Login.jsx'
import Board from './Board.jsx'
import Article from './Article.jsx'
import NotFound from './NotFound.jsx'

// 2. 使用useRoutes方法传入routesList生成Routes组件
function AppRoutes() {
    // 1. 准备一个路由数组 数组中定义所有的路由对应关系
    return  useRoutes([
        {
            path: '/',
            element: <Layout/>,
            children: [
                {
                    index: true, // index设置为true 变成默认的二级路由
                    element: <Board/>
                }, {
                    path: 'article',
                    element: <Article/>
                }
            ]
        }, {
            path: '/login',
            element: <Login/>
        }, {
            path: '*',
            element: <NotFound/>
        }
    ])
}

function App() {
    return (
        <div>
            <BrowserRouter>
                {/* 3. 替换之前的Routes组件 */}
                <AppRoutes/>
            </BrowserRouter>
        </div>
    )
}

export default App