前言

上篇文章我分享一个一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>
  )
}

方法一

在根组件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的开发，第二种是适合项目的开发，可以帮助我们理清代码的逻辑。行文至此，欢迎指正。