React嵌套路由：如何配置不存在URL的重定向（含/foo路径）

问题核心是：访问/foo时，该路由作为嵌套路由的父节点未配置专属element，会默认沿用上层路由的<ComponentWithOutlet />，但因无匹配子路由，Outlet无内容，导致仅渲染根组件。

两种可行解决方案 #

方案一：为/foo路由直接配置重定向element #

给path="foo"的路由添加element属性，指定跳转目标（比如/foo/bar或根路径/）：

const RootRouter: FC = () => {
  return (
    <BrowserRouter basename="/">
      <Routes>
        <Route path="/" element={<ComponentWithOutlet />}>
          <Route path="/" element={<SomeComponent />} />
          {/* 配置foo路由的重定向element，同时保留子路由嵌套 */}
          <Route path="foo" element={<Navigate to="/foo/bar" replace />}>
            <Route path="bar" element={<BarComponent />} />
            <Route path="test" element={<TestComponent />} />
          </Route>
        </Route>
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </BrowserRouter>
  );
};

export default RootRouter;

添加replace属性可避免浏览器历史记录中留下无效的/foo路径，优化跳转体验。

方案二：在foo子路由中添加空路径实现重定向 #

若不想修改父路由的element，可在foo的子路由里新增path=""的路由，匹配/foo路径并触发跳转：

const RootRouter: FC = () => {
  return (
    <BrowserRouter basename="/">
      <Routes>
        <Route path="/" element={<ComponentWithOutlet />}>
          <Route path="/" element={<SomeComponent />} />
          <Route path="foo">
            {/* 空路径匹配/foo，执行重定向 */}
            <Route path="" element={<Navigate to="/foo/bar" replace />} />
            <Route path="bar" element={<BarComponent />} />
            <Route path="test" element={<TestComponent />} />
          </Route>
        </Route>
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </BrowserRouter>
  );
};

export default RootRouter;

之前尝试无效的原因 #

• 在foo路由内加<Route path="*" />：该路由仅匹配/foo/xxx这类未定义的子路径，不会匹配/foo本身，因为/foo是父路由的精确匹配路径，不属于通配符覆盖范围。
• 修改foo路由为<Route path="foo" element={<Navigate />}>无效：大概率是修改时误删了内部子路由的嵌套结构，正确写法需保留子路由同时配置element，即方案一的形式。

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