React多页应用如何配置路由，处理公共组件及父子路由需求？

多公共导航栏的路由配置 #

你可以直接用布局组件包裹嵌套路由的方案实现，不需要做路径匹配判断，也不用拆分多个路由配置文件，所有路由可以统一在app.js中维护：

1. 先封装两套导航栏对应的布局组件，组件内内置对应navbar，用Outlet作为子页面的渲染出口（对应Vue的router-view）：

// 布局组件1：带第一套navbar
import { Outlet } from 'react-router-dom'
const Navbar1Layout = () => {
  return (
    <div>
      <Navbar1 />
      <Outlet />
    </div>
  )
}

// 布局组件2：带第二套navbar
const Navbar2Layout = () => {
  return (
    <div>
      <Navbar2 />
      <Outlet />
    </div>
  )
}

2. 在app.js中配置路由，将对应页面路由放在对应布局的子路由下即可：

import { Routes, Route } from 'react-router-dom'
// 导入布局、页面组件逻辑省略
function App() {
  return (
    <Routes>
      {/* 共用第一套navbar的3个页面 */}
      <Route element={<Navbar1Layout />}>
        <Route path="/a1" element={<PageA1 />} />
        <Route path="/a2" element={<PageA2 />} />
        <Route path="/a3" element={<PageA3 />} />
      </Route>

      {/* 共用第二套navbar的3个页面 */}
      <Route element={<Navbar2Layout />}>
        <Route path="/b1" element={<PageB1 />} />
        <Route path="/b2" element={<PageB2 />} />
        <Route path="/b3" element={<PageB3 />} />
      </Route>

      {/* 无公共navbar的剩余页面，直接声明 */}
      <Route path="/c1" element={<PageC1 />} />
      <Route path="/c2" element={<PageC2 />} />
      <Route path="/c3" element={<PageC3 />} />
      <Route path="/c4" element={<PageC4 />} />
    </Routes>
  )
}

后续如果需要调整页面所属的导航栏，只要把对应路由移动到对应布局的子路由下即可，维护成本极低。 #

React路由的嵌套（父子）路由实现 #

React官方路由库react-router-dom完全支持和Vue父子路由逻辑一致的嵌套路由能力，上述的布局方案本身就是嵌套路由的典型使用场景。
你也可以用配置式写法声明嵌套路由，和Vue的路由配置结构几乎一致：

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
const router = createBrowserRouter([
  {
    path: '/user',
    element: <UserLayout />,
    // 子路由声明，对应Vue的children配置
    children: [
      { path: 'list', element: <UserList /> }, // 匹配/user/list
      { path: 'detail/:id', element: <UserDetail /> } // 匹配/user/detail/123
    ]
  }
])

function App() {
  return <RouterProvider router={router} />
}

父路由组件同样用Outlet渲染子路由内容，和Vue的<router-view>作用完全相同。 #

内容的提问来源于stack exchange，提问作者devb