如何在被路由匹配的组件内部实现嵌套路由

这是React Router v5（对应你代码中使用的Switch、Route API）原生支持的嵌套路由标准实现，零额外依赖，组件自包含度最高，也是官方推荐的实践路径。

核心实现步骤 #

1. 调整顶层App.js的路由配置 #

你当前代码里/screenTwo的路由加了exact严格匹配限制，会导致只要浏览器路径不是完全等于/screenTwo，TwoScreen组件就根本不会被渲染，必须先移除这个限制：

// 修改后的App.js路由部分
<Router>
 <Header/>
 <Switch>
    <Route exact path="/" component={HomeScreen} />
    <Route exact path="/screenOne" component={OneScreen} />
    {/* 去掉原有exact限制，让/screenTwo可以匹配所有以/screenTwo为前缀的子路径 */}
    <Route path="/screenTwo" component={TwoScreen} />
 </Switch>
</Router>

2. 在TwoScreen组件内部实现自包含的导航与子路由逻辑 #

组件内部通过useRouteMatchAPI拿到当前路由的匹配信息，基于这个信息拼接相对路径，不用硬编码全路径，降低后续维护成本：

// TwoScreen.js 组件示例
import { Link, Switch, Route, useRouteMatch } from 'react-router-dom'
// 提前引入需要渲染的子组件
import SubPageA from './SubPageA'
import SubPageB from './SubPageB'

export default function TwoScreen() {
  // 获取当前路由的匹配元信息
  const match = useRouteMatch()

  return (
    <div className="two-screen-container">
      {/* 内部导航链接：用match.url拼接跳转路径 */}
      <nav className="two-screen-nav">
        <Link to={`${match.url}/sub-a`}>子页面A</Link>
        <Link to={`${match.url}/sub-b`}>子页面B</Link>
      </nav>

      {/* 内部子路由匹配：用match.path拼接路由匹配规则 */}
      <Switch>
        {/* TwoScreen自身的默认首页，需要加exact避免路由匹配冲突 */}
        <Route exact path={match.path} render={() => <p>这里是TwoScreen的默认展示内容</p>} />
        <Route path={`${match.path}/sub-a`} component={SubPageA} />
        <Route path={`${match.path}/sub-b`} component={SubPageB} />
      </Switch>
    </div>
  )
}

方案优势 #

• 完全复用React Router原生能力，不需要引入任何第三方状态管理、路由工具，学习成本最低
• 组件自包含度最高：TwoScreen的导航逻辑、子路由规则全部在组件内部维护，和顶层App的路由耦合度极低，后续如果要调整TwoScreen的父路径、甚至把整个模块拆分独立部署，几乎不需要改动顶层代码
• 路径维护成本最低：通过useRouteMatch动态拼接路径，避免硬编码全路径带来的拼写错误、后续改路径要全项目查找替换的问题

关键注意事项 #

• 不要给父级路由（也就是App.js里的/screenTwo路由）加exact，否则所有子路径都无法触发TwoScreen组件的渲染
• 注意区分两个匹配字段的用法：match.url是浏览器实际路径的前缀，用来拼接Link的跳转地址；match.path是路由的规则字符串，用来配置Route的匹配规则，两者不要混用
• TwoScreen内部的默认首页路由要加exact，否则当路径匹配子路由规则时，默认页内容也会被一起渲染

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