react-router v5带路径参数的Redirect如何重构为v6对应写法

首先明确v6相对v5的几个对应改动：

• 移除了exact配置，所有路由默认走精确匹配规则，不需要额外配置
• 移除了render、component属性，统一用element传入路由对应的渲染组件
• 原有的<Redirect>组件被弃用，替换为<Navigate>组件实现重定向逻辑
• v6的<Navigate>支持自动继承当前路由匹配到的路径参数，不需要手动从props中获取

你给出的配置可以直接重构为以下写法，和原有逻辑完全对齐：

{
  path: '/someurl/:id',
  element: <Navigate to="/someurl/extraurl/:id" replace />
}

注意这里的replace属性不要漏，和原<Redirect>的行为一致，会替换当前历史栈记录，避免用户点击浏览器后退按钮重新触发重定向。

如果你需要更灵活的参数处理逻辑，也可以自定义重定向组件实现：

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

const IdRedirect = () => {
  const { id } = useParams();
  return <Navigate to={`/someurl/extraurl/${id}`} replace />
}

// 路由配置对应修改为
{
  path: '/someurl/:id',
  element: <IdRedirect />
}

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