React-Router v4嵌套路由不匹配问题求助

嘿，作为刚摸React Router时踩过不少嵌套路由坑的过来人，这种DevTools显示路由存在但点击链接就变空白的情况我太懂了！咱们一步步排查可能的问题：

1. 父路由组件是否遗漏了<Outlet />？ #

这是嵌套路由最容易踩的坑！React Router需要在父路由的组件里渲染<Outlet />，作为子路由内容的“占位容器”——如果没加这个，子路由的组件根本没地方渲染，页面自然就空白了。

举个正确的例子：

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

// 父路由组件
function Dashboard() {
  return (
    <div className="dashboard">
      <nav>
        {/* 跳转到子路由的链接 */}
        <Link to="profile">我的资料</Link>
      </nav>
      {/* 子路由的内容会渲染在这里！*/}
      <Outlet />
    </div>
  );
}

2. 链接的to属性和路由路径是否真的匹配？ #

哪怕你看着截图里的URL和路由路径一致，也可能有隐性的匹配问题：

• 相对路径vs绝对路径：如果父路由是/dashboard，子路由是profile（相对路径），那链接写成to="profile"才对；如果写成to="/profile"，就会直接跳转到根路径下的/profile，而不是嵌套的/dashboard/profile。
• 大小写问题：React Router的路径是严格区分大小写的！比如路由是/dashboard/profile，但链接写成/Dashboard/Profile，就会匹配失败。
• 末尾斜杠：部分场景下，末尾的斜杠也会影响匹配，比如路由是/dashboard/profile，但链接是/dashboard/profile/，可能会导致匹配异常。

3. 路由注册顺序是否搞反了？ #

React Router是按顺序匹配路由的，如果把宽泛的通配符路由（比如*）或者更通用的路由放在了嵌套路由前面，就会优先匹配到这些，导致子路由根本没机会被命中。

错误示例：

import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter([
  // 错误：通配符路由放在了嵌套路由前面，会先匹配到它
  { path: '*', element: <NotFoundPage /> },
  {
    path: '/dashboard',
    element: <Dashboard />,
    children: [
      { path: 'profile', element: <Profile /> }
    ]
  }
]);

正确的做法是把通配符路由放在所有路由的最后：

const router = createBrowserRouter([
  {
    path: '/dashboard',
    element: <Dashboard />,
    children: [
      { path: 'profile', element: <Profile /> }
    ]
  },
  // 通配符路由放最后，兜底用
  { path: '*', element: <NotFoundPage /> }
]);

4. 是否存在路由上下文冲突？ #

• 检查你的应用里是否嵌套了多个<BrowserRouter>（或其他Router组件），比如在App组件外层套了一个，某个子组件里又套了一个——多个Router会导致路由上下文混乱，子路由无法正确匹配。
• 确认你用的Router类型和链接匹配：比如用了HashRouter的话，链接的to属性需要带#（比如to="#/dashboard/profile"），如果还是按BrowserRouter的写法就会出错。

快速排查步骤 #

1. 打开Chrome控制台的Console标签，点击链接时看是否有React Router的警告（比如No routes matched location "/xxx"），这能直接告诉你路由是否真的匹配上了。
2. 暂时注释掉其他无关路由，只保留父路由和子路由，测试是否能正常渲染，逐步排查是否有其他路由干扰。
3. 打印你的路由配置对象，检查子路由是否正确放在父路由的children数组里，有没有拼写错误。

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