React Router v6：路径缺失时如何自动重定向到正确路径？

云原生阿岚

2026-6-24

React Router v6 实现父路由自动重定向到默认子路由

你的场景是访问 /recipe/:id 时，希望自动跳转到 /recipe/:id/ingredients，可以通过以下两种方式实现：

方法一：添加索引路由（推荐）

React Router v6 中的索引路由专门用于处理父路由匹配但没有子路由路径的情况。只需在父路由下添加带 index 属性的路由，通过 Navigate 组件完成重定向。

先简化路由配置（子路由可用相对路径，无需重复父路由的完整路径），再添加索引路由：

<Route path='/recipe/:id' element={<RecipePage />}>
    {/* 索引路由：匹配 /recipe/:id 时自动重定向到 ingredients 子路由 */}
    <Route index element={<Navigate to="ingredients" />} />
    {/* 子路由使用相对路径更简洁 */}
    <Route path='ingredients' element={<Ingredients />} />
    <Route path='instructions' element={<Instructions />} />
</Route>

这里的 to="ingredients" 是相对路径，React Router 会自动基于当前匹配的父路由路径（/recipe/:id）拼接成完整路径 /recipe/:id/ingredients。

方法二：在组件内判断并重定向

如果需要依赖组件内逻辑（比如数据加载完成后再重定向），可以在 RecipePage 组件中使用 useNavigate 和 useParams 钩子：

import { useNavigate, useParams, useEffect } from 'react-router-dom';

function RecipePage() {
  const navigate = useNavigate();
  const { id } = useParams();

  useEffect(() => {
    if (data) {
      // 判断当前路径是否为父路由根路径，是的话执行重定向
      const currentPath = window.location.pathname;
      if (currentPath === `/recipe/${id}`) {
        navigate(`/recipe/${id}/ingredients`);
      }
    }
  }, [data, id, navigate]);

  // 原组件渲染内容...
}

不过这种方法不如索引路由简洁，推荐优先使用方法一。