前言

上篇文章我分享一个一React路由的几种配置方法，但我在在实际应用中，一级路由是远远不够我们使用的，那这篇我再来分享一下在我们开发时还会遇到的二级路由的配置吧。下面我就来给小伙伴们分享两种二级路由的配置方法。

准备工作

本篇文章配置的二级路由的react版本为18.2.0, react-router-dom版本为 6.11.2。

首先我们先准备四个页面,分为一个根组件页面，一个具有菜单功能的主页面组件，两个一级菜单的子页面组件。准备工作的四个页面代码如下：

第一个为App.jsx根组件页面:

const NotFound = () => <h1>404</h1>
const App = () => {
  return (
  <BrowserRouter>
  </BrowserRouter>
  )
}
export default App

第二个为Layout.jsx主页面：

export default function Layout() {
  return (
    <div className='layout'>
        <div className="left">
          <Link to='/main'> 沸点</Link>
          <Link to='/main/article'> 文章</Link>
        </div>
        <div className="right">
          <header>标题</header>
        </div>
    </div>
  )
}

第三，第四个页面为沸点，文章一级菜单页面：

article.jsx:

export default function Article() {
  return (
    <div>atticle</div>
  )
}

hot.jsx:

export default function Hot() {
  return (
    <div>hoy</div>
  )
}

实现过程描述

实现二级路由主要是要在一级路由下面再配置一级路由，具体实现有如下三步：

1. 在根组件上配置好一级路由
2. 在一级路由的内配置二级路由
3. 在需要展示二级路由的地方配置路由出口

方法一

在根组件App.jsx中直接配置一级路由和二级路由，在BrowserRouter中添加路由配置，代码修改如下：

<BrowserRouter>
    <Routes>
      <Route path='/main' element={<Layout/>}>
        <Route index element={<Hot/>}></Route>
        <Route path='article' element={<Atticle/>}></Route>
      </Route>
      <Route path="*" element={<NotFound/>}></Route>
    </Routes>
</BrowserRouter>

在配置完路由以后，我们还要需要在我们的主页面上添加一个二级路由的路由出口，代码修改如下：

<div className="right">
    <header>标题</header>
    {/* 二级路由出口 */}
    <Outlet>
    </Outlet>
</div>

这样我们就实现了二级路由的配置。同时Hot组件为我们的默认展示页面，效果如下：

方法二

我们采用一个更优雅的方式写，我们将路由单独分出来写，再在根组件App.jsx中引入使用。 路由代码如下：

const NotFound = () => <h1>404</h1>
const routes = [
    {
        path: '/main',
        element: <Layout/>,
        children: [
            {
                index: true,
                element: <Hot/>
            },
            {
                path: 'article',
                element: <Atticle/>
            }
        ]
    },
    {
        path: '*',
        element: <NotFound/>
    }
]
function WraperRoutes () {
    let element = useRoutes(routes) // 识别当前的url， 返回对应的组件
    return element
}
export default WraperRoutes

根组件App.jsx代码修改为:

<BrowserRouter>
    <WraperRoutes/>
</BrowserRouter>

这样我们就借助了router提供的useRoutes高阶函数成功的将路由与页面分开。也实现二级路由的功能，同时也减少了我们代码的耦合性，方便后期我们维护与添加新的路由。

结语

显而易见，两种方法各有各的优势，第一种适合我们日常dome的开发与学习阶段，帮我们更好的理解，第二种才是我们项目开发会使用的路由配置方式，使项目的代码的逻辑更为清晰，同时使我们的代码耦合性更低，增加代码的可维护行。行文至此，欢迎指正。