React Router 6重定向时保留id参数的实现问题

你当前的问题是直接在Navigate的to属性中写了字符串:id，React Router不会自动将其替换为URL中的实际参数值，导致重定向路径错误。

修改方案如下：

1. 导入React Router的useParams和Navigate钩子
2. 编写自定义组件获取路由参数并动态生成重定向路径
3. 在路由配置中使用该自定义组件作为element

修改后的完整代码：

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

const SurveyRoutes = lazy(() =>
    import('@/features/survey').then(({ SurveyRoutes }) => ({ default: SurveyRoutes }))
);

// 自定义重定向组件，获取实际id参数并拼接路径
const EmailSurveyRedirect = () => {
  const { id } = useParams();
  // 使用replace属性可替换历史记录，避免回退到原路径（可选）
  return <Navigate to={`/survey/${id}?m=email`} replace />;
};

export const patientFacingRoutes = [
    {
        path: '/survey/*',
        element: <SurveyRoutes />,
    },
    {
        // 注意：如果你的实际访问路径是/s/:id，这里要改成path: '/s/:id'
        path: '/e/:id',
        element: <EmailSurveyRedirect />,
    },
];

关键说明：

• useParams()钩子会从当前匹配的路由中提取id参数的实际值
• 动态拼接/survey/${id}?m=email，确保重定向路径中的id是URL传入的真实值
• 若需要避免用户回退到原重定向路径，可添加replace属性，它会替换浏览器历史记录中的当前条目，而不是添加新条目

注意：你的示例访问URL是https://mydomain.io/s/111111111111，但当前路由配置的path是/e/:id，如果实际要匹配的是/s/:id，需要将路由的path改为/s/:id，否则该重定向规则不会被触发。

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