如何使用react-router-dom配置嵌套路由 解决子路径组件不渲染问题

你当前的配置是把两个路由平级放置，不符合嵌套路由的渲染规则：

• 如果你需要在Settings组件内部渲染子页面Objective，子路由必须放在Settings组件的指定渲染出口位置，平级配置的路由只会替换整个页面内容
• 如果是在Switch包裹下的平级路由，路由匹配会命中第一个符合规则的项，也会导致子路由无法正常渲染

步骤1：调整根路由配置 #

去掉父路由的exact修饰，根路由仅保留父级入口：

<Route path='/admin/settings' component={Settings} />

步骤2：在Settings组件内添加子路由和导航 #

使用useRouteMatch获取当前父路径，避免硬编码路由：

import { Route, Link, useRouteMatch } from 'react-router-dom'
import Objective from './Objective'

const Settings = () => {
  const { path } = useRouteMatch()
  return (
    <div>
      {/* 公共导航区域 */}
      <div className="settings-nav">
        <Link to={`${path}/objectives`}>目标设置</Link>
      </div>
      {/* 子页面渲染区域 */}
      <div className="settings-content">
        {/* 子路由可以加exact做精确匹配 */}
        <Route exact path={`${path}/objectives`} component={Objective} />
        {/* 父路径默认展示内容 */}
        <Route exact path={path}>
          <p>请选择需要配置的设置项</p>
        </Route>
      </div>
    </div>
  )
}

v6简化了嵌套路由逻辑，废除了exact和component属性，配置更清晰：

步骤1：根路由声明嵌套结构 #

import { Routes, Route } from 'react-router-dom'
import Settings from './Settings'
import Objective from './Objective'

<Routes>
  <Route path="/admin/settings" element={<Settings />}>
    {/* 子路由自动继承父路径前缀 */}
    <Route path="objectives" element={<Objective />} />
    {/* 索引路由：访问父路径时默认展示的内容 */}
    <Route index element={<p>请选择需要配置的设置项</p>} />
  </Route>
</Routes>

步骤2：Settings组件添加子路由出口 #

使用<Outlet />作为子页面的渲染占位：

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

const Settings = () => {
  return (
    <div>
      <div className="settings-nav">
        <Link to="objectives">目标设置</Link>
      </div>
      <div className="settings-content">
        <Outlet />
      </div>
    </div>
  )
}

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