React Router Dom v6中useParams无法正常使用的问题求助

你的代码中导致useParams无法正常获取参数的核心问题是没有调用useParams钩子函数。useParams是React Router提供的钩子，必须通过调用（添加括号useParams()）才能返回包含路由参数的对象，而非直接赋值函数本身。

修正后的ProductDetails组件代码： #

import React from "react";
import { useParams } from "react-router-dom";

const ProductDetails = () => {
  // 调用useParams钩子，获取参数对象
  const params = useParams();
  console.log(params.productId);

  return (
    <div>
      <h1>Product Detail</h1>
      <p>{params.productId}</p>
    </div>
  );
};

export default ProductDetails;

额外注意事项： #

• 确保访问路径与路由配置匹配：你的路由配置是/products/:productId，因此需要访问类似/products/123这样的路径才能触发该路由并传递参数。
• 确认整个应用已被BrowserRouter（或其他Router组件）包裹：React Router的钩子（包括useParams）只能在Router上下文内生效，通常需要在App组件外层添加<BrowserRouter>包裹。

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