我有一个 product.js 文件。我想通过 id 读取数据，例如 http://localhost:3000/product/2 (/product/:id)。但是它显示 TypeError：无法读取未定义 react 的属性“id”。 我只想通过产品 id 读取我的产品。我读取了我所有的产品。但是当我想读取单个数据时，它显示此错误。我认为是 props 问题。请帮帮我。 我提供了我的文件。 我的 product.js 文件。

exports.products = [
  {
    _id: '1',
    name: 'Airpods Wireless Bluetooth Headphones',
    image: '/images/airpods.jpg',
    description:
      'Bluetooth technology lets you connect it with compatible devices wirelessly High-quality AAC audio offers immersive listening experience Built-in microphone allows you to take calls while working',
    brand: 'Apple',
    category: 'Electronics',
    price: 89.99,
    countInStock: 10,
    rating: 4.5,
    numReviews: 12,
  },
  {
    _id: '2',
    name: 'iPhone 11 Pro 256GB Memory',
    image: '/images/phone.jpg',
    description:
      'Introducing the iPhone 11 Pro. A transformative triple-camera system that adds tons of capability without complexity. An unprecedented leap in battery life',
    brand: 'Apple',
    category: 'Electronics',
    price: 599.99,
    countInStock: 7,
    rating: 4.0,
    numReviews: 8,
  },
  {
    _id: '3',
    name: 'Cannon EOS 80D DSLR Camera',
    image: '/images/camera.jpg',
    description:
      'Characterized by versatile imaging specs, the Canon EOS 80D further clarifies itself using a pair of robust focusing systems and an intuitive design',
    brand: 'Cannon',
    category: 'Electronics',
    price: 929.99,
    countInStock: 5,
    rating: 3,
    numReviews: 12,
  },
  {
    _id: '4',
    name: 'Sony Playstation 4 Pro White Version',
    image: '/images/playstation.jpg',
    description:
      'The ultimate home entertainment center starts with PlayStation. Whether you are into gaming, HD movies, television, music',
    brand: 'Sony',
    category: 'Electronics',
    price: 399.99,
    countInStock: 11,
    rating: 5,
    numReviews: 12,
  },
  {
    _id: '5',
    name: 'Logitech G-Series Gaming Mouse',
    image: '/images/mouse.jpg',
    description:
      'Get a better handle on your games with this Logitech LIGHTSYNC gaming mouse. The six programmable buttons allow customization for a smooth playing experience',
    brand: 'Logitech',
    category: 'Electronics',
    price: 49.99,
    countInStock: 7,
    rating: 3.5,
    numReviews: 10,
  },
  {
    _id: '6',
    name: 'Amazon Echo Dot 3rd Generation',
    image: '/images/alexa.jpg',
    description:
      'Meet Echo Dot - Our most popular smart speaker with a fabric design. It is our most compact smart speaker that fits perfectly into small space',
    brand: 'Amazon',
    category: 'Electronics',
    price: 29.99,
    countInStock: 0,
    rating: 4,
    numReviews: 12,
  },
]

// export default products;

我的 App,js

import logo from './logo.svg';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

import Home from './components/home/Home';
import Nav from './components/home/Nav';
import Footer from './components/home/Footer';
import Single from './components/home/Single';
// import AdminHome from './components/admin/AdminHome';

function App() {
  return (
    <Router>
    <div>
    <Nav />
        <Switch>
          <Route  exact  path="/"><Home /></Route>
          <Route    path="/product/:id"><Single /></Route>

        </Switch>
    <Footer/>
    </div>
  </Router>
  );
}

export default App;

我的 Single.js

import React, { Component,useState ,useEffect }from 'react'
import axios from "axios";
import {products} from "../../products"
const Single = ( match ) => {
    const product = products.find((p) => p._id === match.params.id)

    return (
        <div>

            {product.name}

        </div>
    )
}

export default Single

我如何使用我的 props？ 那么我如何通过 ID 读取我的单个数据。 谢谢。