React Router V6如何声明式实现带路径参数的路由重定向？

在 React Router v6+（你使用的 createBrowserRouter 属于该版本体系）中，完全可以通过官方原生API组合实现带路径参数的重定向，无需复杂自定义组件：

方法1：内联组件结合 useParams #

直接在路由配置的 element 字段中用内联函数组件包裹 <Navigate>，通过 useParams() 提取原路径参数并拼接到目标URL：

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

const router = createBrowserRouter([
  // 其他路由配置...
  {
    path: '/original/:paramName',
    element: (
      <Navigate 
        replace 
        to={`/redirected/location/${useParams().paramName}`} 
      />
    )
  },
  // 目标路由
  {
    path: '/redirected/location/:paramName',
    element: <YourTargetComponent />
  }
]);

方法2：轻量参数重定向组件 #

如果内联写法不够清晰，可封装一个极简函数组件（本质仍是原生API组合）：

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

// 专门处理该重定向的组件
const OriginalToRedirected = () => {
  const { paramName } = useParams();
  return <Navigate replace to={`/redirected/location/${paramName}`} />;
};

// 路由配置
const router = createBrowserRouter([
  {
    path: '/original/:paramName',
    element: <OriginalToRedirected />
  },
  {
    path: '/redirected/location/:paramName',
    element: <YourTargetComponent />
  }
]);

多参数场景适配 #

若原路径包含多个参数（比如 /original/:id/:slug），只需提取对应参数拼接即可：

const MultiParamRedirect = () => {
  const { id, slug } = useParams();
  return <Navigate replace to={`/new/route/${id}/${slug}`} />;
};

以上两种方式均基于 React Router 原生的 useParams 钩子和 <Navigate> 组件实现，属于官方支持的原生解决方案，无需额外自定义复杂逻辑。

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