React Router DOM v6中匹配动态首路由时重定向至指定路由的方法

你当前的问题是：使用<Navigate to="/:productId/productInfo" replace />时，React Router不会自动解析:productId这个动态参数，而是把它当作字符串字面量处理，导致重定向后的路径变成http://localhost:3000/:productId/productInfo，而非实际的产品ID路径。

修复方案 #

需要通过useParams钩子获取当前路由的动态参数，再拼接成正确的重定向路径：

修改后的完整代码 #

import React from "react";
import { Route, Routes, Navigate, useParams } from "react-router-dom";
import ProductDescription from "./ProductDescription";

// 自定义组件获取动态参数并执行重定向
const RedirectToProductInfo = () => {
  const { productId } = useParams();
  return <Navigate to={`/${productId}/productInfo`} replace />;
};

const UserRoutes = () => {
  return (
    <Routes>
      <Route path="/:productId/productInfo" element={<ProductDescription />} />

      {/* 使用自定义组件替代硬编码的Navigate路径 */}
      <Route path="/:productId" element={<RedirectToProductInfo />} />
    </Routes>
  );
};

export default UserRoutes;

原理说明 #

• useParams()会返回当前路由的动态参数对象，从中可以拿到实际的productId值。
• 通过模板字符串/${productId}/productInfo拼接出正确的目标路径，确保重定向后路径包含真实的产品ID。
• replace属性保留，避免在浏览器历史记录中留下原路径的无效记录。

修改后，当用户访问http://localhost:3000/123这类路径时，会自动重定向到对应产品的详情页http://localhost:3000/123/productInfo。

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