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

所以我收到一条错误消息 - TypeError: Cannot readproperties 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 />

该教程似乎较旧并且使用react-router-dom版本 5，而您正在使用版本 6。在版本 6 中，有许多重大 API 更改。这Route组件不再使用component or render道具，element传递有效 JSX 文字的 prop 替换了它们。路线道具 (history, location, and match）也不再存在，路由组件must现在使用 React hooks 来访问它们。

路线与路线

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

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

Use the useParams钩子来访问id匹配参数匹配参数将是一个字符串，因此如果您的产品 ID 是数字类型，那么为了确保严格相等，请将_id属性到字符串以使用类型安全比较。别忘了Array.prototype.find回报undefined如果未找到匹配项，则代码应在渲染时尝试访问结果值以获取属性之前检查结果值。

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

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

  if (!product) return null; // or fallback UI

  return (
    <div>
      {product.name}
    </div>
  );
}