React Router子页面切换异常：Navbar链接仅改URL不切换页面

嘿，这问题我熟！你踩了React Router里一个很常见的坑——重复嵌套<Router>组件，这直接导致了路由上下文冲突，才会出现URL变了但页面不更新的情况。

核心问题拆解 #

你的根App已经用<Router>包裹了整个应用，结果在Admin组件里又套了一层<Router>。这会让两个Router各自维护独立的路由状态：当你从Navbar点击链接时，顶层Router更新了地址栏，但Admin里的子Router完全没感知到这个变化，自然不会切换子页面；首次跳转有效是因为当时Admin组件还没挂载，子Router还没生效，后续点击就彻底冲突了。另外，你Admin里的默认路由component={Admin}还会触发无限递归渲染，这也是个隐藏的致命bug。

修复方案 #

1. 移除Admin组件里的<Router>标签

整个应用只需要一个顶层Router就够了，删掉Admin里的<Router>和</Router>，所有路由逻辑都交给根App的Router处理。

2. 修正Admin的默认路由

把默认路由的component={Admin}改成你的Admin首页组件（比如叫AdminDashboard或者AdminHome），避免无限循环渲染。

修改后的Admin组件代码示例：

import { Switch, Route } from 'react-router-dom';

const Admin = ({ match }) => {
  return (
    <>
      <SubNav />
      <Switch>
        {/* 子路由：计划管理页面 */}
        <Route exact path={`${match.path}/planners`} component={Planners} />
        {/* 默认路由：Admin首页（替换成你实际的首页组件） */}
        <Route exact path={`${match.path}/`} component={AdminDashboard} />
      </Switch>
    </>
  );
};

3. 优化子导航链接（可选）

为了让SubNav的链接更灵活，建议用match.url构建相对路径，比如SubNav里的链接可以这么写：

// SubNav组件内的示例链接
<Link to={`${match.url}/planners`}>Planners</Link>
<Link to={`${match.url}/`}>Admin首页</Link>

验证效果 #

现在再测试Navbar的链接：

• 点击/admin/planners会直接跳转到子页面，URL和组件同步更新
• 点击/admin会回到Admin首页，不会再出现只改URL不切换组件的情况

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