React Router Dom 5.3.0：/products/1路径下ProductScreen无法渲染

我跟随YouTube教程《React & Node零基础入门教程：9小时构建并部署电商网站》开发电商网站，目前卡在第8部分构建ProductScreen环节。严格按照教程操作后，访问http://localhost:3000/products/1时，页面仅显示路由外部的header和footer，ProductScreen的产品信息内容完全不渲染。已排查5小时，急需解决。

已做测试：将<Route path="/product/:id" component={ProductScreen} />修改为<Route path="/" component={ProductScreen} />并注释HomeScreen路由后，ProductScreen内容可正常显示。

相关代码 #

package.json #

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.3.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

App.js #

import React from "react";
import { BrowserRouter, 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 (
    <BrowserRouter>
      <div className="grid-container">
        <div className="overlay" data-overlay></div>
        <Header></Header>
        <main>
          <div className="content">
            <Route path="/product/:id" component={ProductScreen} />
            <Route path="/" exact={true} component={HomeScreen} />
          </div>
        </main>
        <Footer></Footer>
      </div>
    </BrowserRouter>
  );
}

export default App;

ProductScreen.js #

import React from "react";
import Rating from "../Components/Rating";
import data from "../data";

export default function ProductScreen(props) {
  const product = data.products.find((x) => x.id === props.match.params.id);
  if (!product) {
    return <div> Product Not Found</div>;
  }
  return (
    <div className="product-screen">
      <div className="container">
        <div className="product-screen-container">
          <div className="product-gallery">
            <img src={product.image1} alt={product.name} />
            <img src={product.image2} alt={product.name} />
            <img src={product.image1} alt={product.name} />
            <img src={product.image2} alt={product.name} />
            <img src={product.image1} alt={product.name} />
            <img src={product.image2} alt={product.name} />
          </div>
          <div className="product-info-action">
            <div className="product-info">
              <h2>{product.category}</h2>
              <h1>{product.name}</h1>
              <h2>Rs.{product.price}
                <Rating>rating={product.rating}numReviews={product.numReviews}</Rating>
              </h2>
            </div>
            <div className="product-action">
              <button>Create Custom Size</button>
              <button>Customize</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Jay Choudhary