React Router v6 带动态参数重定向参数未解析问题求解

React Router v6 中 <Navigate> 组件的 to 属性不会自动解析字符串里的动态路由参数占位符，直接写 ":teamId/league" 时，:teamId 会被当做普通字符串拼接进路径，导致动态参数没有被替换为实际值。

方案1：使用相对路径跳转（推荐） #

v6 默认采用相对路径匹配规则，当前路由已经命中 :teamId 层级时，直接写子路径即可，不需要重复声明动态参数：

<Route
   path=":teamId"
   element={<Navigate to="league" replace />}
/>

<Route path=":teamId/*" element={<TeamsPage />} />

这种写法会自动基于当前匹配到的 :teamId 实际值拼接路径，访问 /liverpool 时会正确跳转到 /liverpool/league，没有额外的参数获取逻辑，代码更简洁。

方案2：手动获取参数拼接路径 #

如果需要做更复杂的路径逻辑，可以通过 useParams 钩子拿到当前路由的动态参数，手动拼接目标路径：

// 可抽离为独立组件，也可根据业务需求写内联逻辑
const TeamRedirect = () => {
  const { teamId } = useParams();
  return <Navigate to={`${teamId}/league`} replace />;
};

// 路由配置
<Route path=":teamId" element={<TeamRedirect />} />
<Route path=":teamId/*" element={<TeamsPage />} />

v5 到 v6 的路由跳转逻辑有较大调整：v6 取消了默认的绝对路径匹配规则，所有路由跳转、子路由注册默认基于当前已匹配的父路径做相对解析，升级过程中不需要在子路径里重复写父级路径段或者动态参数占位符，避免出现路径字符串不解析的问题。

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