React Router v6子路由重定向问题：URL参数未正确替换

你遇到的问题根源在于重定向路径的写法错误：
你在<Navigate>中使用了绝对路径/recipe/:id/ingredients，React Router会把:id当成字面量字符串直接拼接，而不是解析当前路由的动态参数值，所以才会出现重定向到/recipe/:id/ingredients而非实际参数路径的情况。

修复方案 #

方案1：使用相对路径（最简洁）

因为该子路由嵌套在/recipe/:id父路由下，直接使用相对路径ingredients即可，React Router会自动拼接父路由的动态参数：

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path='/' element={<App />} errorElement={<ErrorPage />}>
      <Route path='/' element={<HomePage />} />
      <Route path='/about' element={<AboutPage />} />
      <Route path='/recipe/:id' element={<RecipePage />}>
        {/* 改用相对路径 */}
        <Route index element={<Navigate to='ingredients' replace />}/>
        {/* 子路由路径可简化，无需重复父路由前缀 */}
        <Route path='ingredients' element={<Ingredients />} />
        <Route path='instructions' element={<Instructions />} />
      </Route>
    </Route>
  )
)

方案2：通过useParams获取动态参数（适合需用绝对路径的场景）

如果必须使用绝对路径，可以自定义一个重定向组件，先通过useParams获取当前路由的id参数，再构造正确路径：

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

const RecipeIndexRedirect = () => {
  const { id } = useParams();
  return <Navigate to={`/recipe/${id}/ingredients`} replace />;
};

然后在路由配置中使用该组件：

<Route path='/recipe/:id' element={<RecipePage />}>
  <Route index element={<RecipeIndexRedirect />}/>
  <Route path='ingredients' element={<Ingredients />} />
  <Route path='instructions' element={<Instructions />} />
</Route>

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