如何在反應中使用 match.params.id

Question

在我的反應代碼中，我遇到了困難。 我想根據其 id 打印產品名稱，該產品將從 product.js 中獲取。 我正在使用路由器顯示不同的產品而無需重新加載。

import product from './product'

export default function ProductScreen({match}) {
    const products=product.find(p=>p._id === match.params.id)
    return (
        <div>
            {products.name}
        </div>
    )
}

控制台顯示
Uncaught TypeError: Cannot read properties of undefined (reading 'params') at ProductScreen路由器的代碼是

<Router>
          <Routes>
          <Route path="/" element={<HomeScreen />} exact/>
          <Route path="/product/:id" element={<ProductScreen />} />
        </Routes>
    </Router>

產品文件是

const product=[
    {
        _id:'1',
        name : 'Shoes',
        images : '/img/shoe4.jfif',
        discription : 'Lorem10j,jdscjscjc nxkd kdn ddksad asdkjdhsadb'
    }
]

Answer 1

您可以使用 useParams()

import { useParams } from "@reach/router"

// route: /user/:userName
const User = () => {
  const params = useParams();

  return <h1>{params.userName}</h1>
)

來自： https://reach.tech/router/api/useParams

Answer 2

您可以在 productScreen.js 中獲取查詢參數：

import {useRouter} from 'react-router-dom'
const {id} = useRouter();
const [data , setData] = useState({});
useEffect(() => {
  if(id){
     const products=product.filter(p=>p._id == id);
      setData(products);
   }
},[id])
    return (
    <div>
        {data?.name}
    </div>