react-router-dom多段路径路由显示空白页问题

问题原因 #

你的嵌套路由配置里，testing下的子路由用了绝对路径 /test，在React Router v6中，带开头斜杠的路径是绝对路径，会直接从根路径开始匹配，所以这个路由实际匹配的是/test，而非你期望的/testing/test。当访问/testing/test时，没有对应的路由规则匹配，最终会命中path="*"的错误路由，如果你的Error组件没有渲染内容，就会出现空白页。

修复方案 #

把嵌套子路由的路径改成相对路径，去掉开头的斜杠：

<UserProvider>
  <BrowserRouter>
    <Navbar />
    <Routes>
      <Route path="/">
        <Route index element={<Grid />} />
        <Route path="testing">
          <Route index element={<Test />} />
          {/* 去掉开头的斜杠，使用相对路径 */}
          <Route path="test" element={<Test />} />
        </Route>
        <Route path="*" element={<Error />} />
      </Route>
    </Routes>
    <Footer
      legal={threat_intel.bottom_disclaimer}
      lastUpdate={threat_intel["Data Last Update"]}
    />
  </BrowserRouter>
  <ToastContainer />
</UserProvider>

修改后，test路由会继承父路由testing的路径，完整匹配/testing/test，此时访问该路径就能正常渲染Test组件，同时Navbar和Footer因为在Routes外部，会始终渲染。

另外建议检查你的Error组件是否有实际内容，避免路由命中错误规则时出现空白页。

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