useParam 在反應路由器 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鈎子是一個 function 並且實際上需要調用才能產生任何效果。

例子：

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

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

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