useParam 在 React router Dom v6 中不起作用？

Question

我正在尝试将参数传递给我的另一个组件，即

productDetail

组件，但是当我尝试使用

useParam

访问该参数值时，它似乎不起作用：

应用程序：

import React from "react";
import { Route, Routes } from "react-router-dom";
import MainHeader from "./components/MainHeader.jsx";
import Product from "./pages/Product.jsx";
import ProductDetails from "./pages/ProductDetails.jsx";
import Welcome from "./pages/Welcome.jsx";

const App = () => {
  return (
    <div style={{ textAlign: "center" }}>
      <header>
        <MainHeader />
      </header>
      <Routes>
        <Route path="/welcome" element={<Welcome />} />
        <Route path="/product" element={<Product />} />
        <Route path="/products/:productId" element={<ProductDetails />} />
      </Routes>
    </div>
  );
};

export default App;

产品详情：

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

const ProductDetails = () => {
  const params = useParams;
  console.log(params.productId);

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

export default ProductDetails;

Answer 1

useParams

钩子是一个函数，实际上需要调用才能产生任何效果。

示例：

const ProductDetails = () => {
  const { productId } = useParams();

  useEffect(() => {
    console.log({ productId });
  }, [productId]);

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