React JS函数组件如何实现子路由/嵌套路由配置

你当前使用的是React Router v6版本，嵌套路由需要同时完成路由表配置、路由渲染逻辑适配、父组件出口配置三个环节，具体实现如下：

1. 修正并扩展路由常量配置 #

首先修正原有配置的语法错误，再给需要嵌套子路由的父路由添加children字段声明子路由结构，v6版本已废弃exact属性，无需额外配置：

const navbarRoutes = [
  {
    path: '/',
    text: 'user',
    main: <User />
  },
  {
    path: '/useraddress',
    text: 'useraddress',
    main: <UserAddress />,
    // 声明/useraddress路径下的嵌套子路由
    children: [
      { index: true, main: <AddressList /> }, // 访问/useraddress时默认渲染的子页面
      { path: 'add', main: <AddAddress /> }, // 匹配路径 /useraddress/add
      { path: 'edit/:id', main: <EditAddress /> } // 匹配带参数路径 /useraddress/edit/1
    ]
  }
]

2. 修改App.js的路由渲染逻辑，支持多层路由递归渲染 #

原有的遍历逻辑只支持单层路由，需要封装递归渲染函数，自动识别子路由并嵌套渲染：

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

// 递归渲染路由表
const renderRoutes = (routeList) => {
  return routeList.map((route) => {
    // 存在子路由时，嵌套渲染Route结构
    if (route.children?.length) {
      return (
        <Route key={route.path} path={route.path} element={route.main}>
          {renderRoutes(route.children)}
        </Route>
      )
    }
    // 普通路由/ index路由直接渲染
    return (
      <Route 
        key={route.path || 'index'} 
        path={route.path} 
        index={route.index} 
        element={route.main} 
      />
    )
  })
}

function App() {
  return (
    <div className="app-container">
      {/* 全局公共内容比如顶部导航栏可以放在这里 */}
      <Routes>
        {renderRoutes(navbarRoutes)}
      </Routes>
    </div>
  )
}

export default App

3. 在/useraddress对应的父组件中添加子路由出口 #

嵌套路由的子内容不会自动展示，需要在父组件（即示例中的UserAddress组件）中引入Outlet组件作为子路由的渲染占位，父组件的公共布局（比如选项卡、侧边栏）可以和Outlet共存：

import { Outlet, NavLink } from 'react-router-dom'

function UserAddress() {
  return (
    <div className="user-address-page">
      {/* 地址页公共导航 */}
      <div className="address-tab-bar">
        <NavLink to="/useraddress">地址列表</NavLink>
        <NavLink to="/useraddress/add">新增地址</NavLink>
      </div>
      {/* 子路由内容将渲染在Outlet位置 */}
      <div className="address-content-wrap">
        <Outlet />
      </div>
    </div>
  )
}

export default UserAddress

配置注意事项 #

• React组件名称必须首字母大写，原配置中的<useraddress>为错误写法，React会将其识别为原生DOM标签，需改为大驼峰命名的<UserAddress />，且JSX标签必须自闭合
• 子路由的path不要以/开头，写相对路径即可自动拼接父路由前缀；如果加了开头的/，会被识别为根路径下的绝对路由，丢失嵌套关系
• index: true标记的是父路由的默认子路由，访问父路由路径时会自动渲染该路由内容，不需要配置path属性

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