React - TypeError：无法读取未定义的属性（读取“参数”）

Question

所以我收到一条错误消息 - TypeError: Cannot read properties of undefined (reading 'params')

TypeError: Cannot read properties of undefined (reading 'params')
       5 | import products from '../products'
       6 | 
       7 | function ProductScreen({ match }) {
       8 |     const product = products.find((p) => p._id == match.params.id)
       9 |     return (
      10 |         <div>
      11 |             {product.name}

这是导致问题的我的 ProductScreen.js 文件

import React from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Button, Card } from 'react-bootstrap'
import Rating from '../components/Rating'
import products from '../products'

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

export default ProductScreen

和我的 App.js

import { Container } from 'react-bootstrap'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Header from './components/Header'
import Footer from './components/Footer'

import HomeScreen from './screens/HomeScreen'
import ProductScreen from './screens/ProductScreen'

function App() {
  return (
    <Router>
      <Header />
      <main className="py-3">
        <Container>
          <Routes>
            <Route path='/' element={<HomeScreen/>} exact />
            <Route path='/product/:id' element={<ProductScreen/>} />
          </Routes>
        </Container>
      </main>
      <Footer />
    </Router>
  );
}

export default App;

我还尝试将 match.params.id 更改为 Number 或 ParseInt (match.params)，但仍然给我一个错误...

我知道这很简单，但我被困在这里，无法继续……任何帮助将不胜感激！

还有一个问题 - 在 App.js 内部，Route 所在的位置，在教程中使用 components={} 属性而不是 element={}。当我尝试同样的方法时，它给了我一个错误，所以我不得不以另一种方式修复它。你知道为什么会导致错误吗？

来自教程

<Route path='/' component={HomeScreen} exact />

我的修复——

<Route path='/' element={<HomeScreen/>} exact />

Answer 1

本教程似乎较旧并使用react-router-dom 版本 5，而您使用的是版本 6。在版本 6 中，有许多破坏性的 API 更改。 Route 组件不再使用 component 或 render 道具，传递有效 JSX 文字的 element 道具替换了它们。 route props（history、location 和 match）也不再存在，路由组件必须现在使用 React 挂钩来访问它们。

Routes and Route

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactElement | null;
  index?: boolean;
  path?: string;
}

给定路线：<Route path='/product/:id' element={<ProductScreen/>} />

使用useParams 挂钩访问id 匹配参数。匹配参数将是一个字符串，因此如果您的产品 ID 是数字类型，那么为了确保严格相等，请将 id 参数转换为数字：

import { Link, useParams } from 'react-router-dom';
...

function ProductScreen() {
  const { id } = useParams();
  const product = products.find((p) => p._id === Number(id));
  return (
    <div>
      {product.name}
    </div>
  );
}

Answer 2

在路由器中：

<Route path='/product/:id' element={ProductScreen} />

在 ProductScreen 组件中：

import { useParams } from "react-router-dom";
...
const { id } = useParams();

https://v5.reactrouter.com/web/api/Hooks/useparams

Answer 3

import { Link, useParams } from 'react-router-dom';
...

function ProductScreen() {
  const { id } = useParams();
  const product = products.find((p) => p._id === Number(id));
  return (
    <div>
      {product.name}
    </div>
  );
}

这解决了:)

Answer 4

我遇到了同样的问题，最后这段代码成功了。

import { useParams } from 'react-router-dom';

const { id } = useParams();

const product = products.find((p) => p._id === (id));

 <Route path="/product/:id" element={<ProductDetails />} />

Answer 5

**In App.js file:** 

<Route path="/products/:id" element={<SingleProduct />} />

**In SingleProduct.js file:** 

import { useParams } from 'react-router-dom'

const SingleProduct = () => {

const { id } = useParams()
const product = products.find((p) => p._id === (id))

 <div>
      <img src={product.image} alt={product.name} />
      <h3>product.name</h3>
</div>
}
export default SingleProduct;


**This code worked in my case.** 

Answer 6

从“react-router-dom”导入 {useParams}

const { id } = useParams(); const product = products.find((p) => p._id === (id));

在 app.js 中