React路由重定向传参问题：为何该Route配置不生效？

失效原因 #

原配置存在两个关键问题：

• Redirect组件在React Router v6版本中已被弃用，官方推荐使用Navigate组件替代。
• 即使忽略版本差异，to="/game/live/:id"中的:id是字面量字符串，路由系统不会自动将其解析为当前URL中的实际id参数值，最终跳转后的URL会变成/game/live/:id，而非预期的/game/live/1234。

正确实现方案（基于React Router v6） #

方法1：封装跳转组件获取参数 #

创建一个负责重定向的组件，通过useParams钩子拿到当前路由的id，再拼接目标URL：

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

const PrepareToLiveRedirect = () => {
  const { id } = useParams();
  // replace属性用于替换历史记录，避免返回时回到重定向页面
  return <Navigate to={`/game/live/${id}`} replace />;
};

// 路由配置
<Route path="/game/prepare/:id" element={<PrepareToLiveRedirect />} />

方法2：直接在路由中使用函数式element（v6.4+） #

如果使用React Router v6.4+的createBrowserRouter等数据路由方案，可以直接在路由配置中通过params获取参数：

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

const router = createBrowserRouter([
  {
    path: '/game/prepare/:id',
    element: ({ params }) => <Navigate to={`/game/live/${params.id}`} replace />,
  },
  // 其他路由配置...
]);

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