React Router嵌套路由切换链接时组件无法加载问题排查

嘿，我一眼就发现问题所在了！

你的问题核心出在外层路由的exact属性上，咱们一步步拆解：

1. 你在ComponentA里给根路径/的Route加上了exact，这意味着只有当URL严格等于/的时候，才会渲染ComponentB。
2. 当你点击CLICK HERE跳转到/campaigns时，URL不再是严格的/，ComponentA里的Switch找不到匹配的Route，直接导致ComponentB被卸载——这就是页面空白的原因：连ComponentB都没了，里面的Campaigns组件自然加载不出来。

解决方案一：移除外层Route的exact属性 #

最简单的修复方式是去掉ComponentA中根Route的exact，这样只要URL以/开头（所有路径都是如此），就会渲染ComponentB，然后ComponentB内部的Switch会继续匹配子路径：

// ComponentA 修改后的代码
<BrowserRouter>
  <Switch>
    <Route path="/"> {/* 移除exact属性 */}
      <ComponentB />
    </Route>
    // 其他路由保持不变
  </Switch>
</BrowserRouter>

⚠️ 注意：如果ComponentA里还有其他Route，记得把更具体的路由放在前面，比如/about、/contact这类要放在根Route之前，避免被根Route拦截。

解决方案二：使用规范的嵌套路由写法（更推荐） #

如果后续需要扩展更多嵌套路由，推荐用React Router的嵌套路由标准写法，通过useRouteMatch来获取父路径，让子路由基于父路径匹配：

// ComponentA 代码保持不变（可以保留或移除exact，建议移除）
<BrowserRouter>
  <Switch>
    <Route path="/">
      <ComponentB />
    </Route>
    // 其他路由
  </Switch>
</BrowserRouter>

// ComponentB 修改后的代码
import { useRouteMatch, NavLink, Switch, Route } from 'react-router-dom';

function ComponentB() {
  const match = useRouteMatch(); // 获取当前组件匹配的路径，这里是"/"

  return (
    <>
      <NavLink to={`${match.url}/campaigns`}>CLICK HERE</NavLink>
      <Switch>
        <Route exact path={match.path}> {/* 匹配父路径 "/" */}
          <Dashboard />
        </Route>
        <Route path={`${match.path}/campaigns`}> {/* 匹配 "/campaigns" */}
          <Campaigns />
        </Route>
      </Switch>
    </>
  );
}

这种写法的优势是扩展性强，后续添加/campaigns/detail这类子路由时，只需要在ComponentB的Switch里继续嵌套即可，不会出现路由匹配冲突。

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