React中带参数嵌套路由实现及react-router-dom标签页组件切换问题解决

你的问题出在嵌套了多余的<Router>组件——整个React应用只需要一个顶层的Router（就是App.js里的那个），嵌套路由不需要再包裹Router，否则会导致路由上下文冲突，Link跳转后无法正确匹配子路由。

修复步骤： #

1. 移除Channel组件中的<Router>标签
   子路由只需要依赖顶层Router提供的上下文，不需要自己再创建新的Router实例。

修改后的Channel.jsx代码：

function Channel(props) {
  let { path, url } = useRouteMatch();
  return (
    <main className="relative top-14" style={{height: "300vh"}}>
      <Navigator />
      {/* 移除了多余的<Router> */}
      <Switch>
        <Route exact path={path} component={Account} />
        <Route exact path={`${path}/string`} component={String} />
        <Route exact path={`${path}/number`} component={Number} />
        <Route exact path={`${path}/boolean`} component={Boolean} />
        <Route exact path={`${path}/docs`} component={Documentation} />
      </Switch>
    </main>
  );
}

2. 确认Navigator的Link路径生成逻辑
   你在Navigator.jsx里用useRouteMatch()获取的url来拼接Link的to属性是完全正确的，它会自动基于当前的/channel/:channel_id路径生成正确的子路由链接（比如/channel/12kb3v124j38727kguby/string），移除多余Router后这个逻辑就能正常工作了。

为什么会出错？ #

React Router的路由状态和上下文是由顶层Router统一管理的，如果你在子组件里再嵌套Router，会创建一个独立的路由上下文，此时Link跳转的路径会被这个子Router处理，而不是顶层的Router，导致页面无法正确匹配子路由组件。

这样修改后，点击Navigator里的标签页Link，就能正常切换Channel页面下的Account、String等子组件了。

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