道具验证中缺少“match.params.id”

Question

对于这个项目，我正在学习一个教程。我是初学者。

我的代码在抛出错误

console.log(props.match.params.id);

这是错误

'match.params.id' is missing in props validation

如果我将其更改为 console.log(props)，它会打印 {}，它是空的？

我想要它做的是打印产品页面的 id，在这种情况下它将是 2。“http://localhost:3000/product/2”我怎样才能让它工作？

这是我的完整 ProductScreen.js

import React from 'react';

function ProductScreen(props) {
    console.log(props.match.params.id);
    return <div>ProductScreen</div>
}
export default ProductScreen;

这里是 app.js，里面有我的 HTML

import React from 'react';
import {BrowserRouter, Routes, Route, Link} from 'react-router-dom';
import './App.css';
import HomeScreen from './Screens/HomeScreen';
import ProductScreen from './Screens/ProductScreen';

function App() {

  const openMenu = () =>{
    document.querySelector(".sidebar").classList.add("open");
  }
  const closeMenu = () =>{
    document.querySelector(".sidebar").classList.remove("open");
  }

  return (
    <BrowserRouter>
    <div className="grid-container">
            <header className="header">
                <div className="brand">
                    <button onClick={openMenu}>
                        &#9776;
                    </button>
                    <Link to="/" >E-Commerce</Link>
                </div>
                <div className="header-links">
                    <a href="signin">Sign In</a>
                    <a href="cart.html">Cart</a>
                </div>
            </header>
            <aside className="sidebar">
                <h3>Shopping Categories</h3>
                <button className="sidebar-close-button" onClick={closeMenu}>x</button>
                <ul>
                    <li>
                        <a href="index.html">Pants</a>
                    </li>
                    <li>
                        <a href="index.html">Shirts</a>
                    </li>
                </ul>
            </aside>
            <main className="main">
                <div className="content">
                  <Routes>
                  <Route exact path="/" element={<HomeScreen />} />
                  <Route path="/product/:id" element={<ProductScreen/>} />
                  </Routes>
                    
                </div>
            </main>
            <footer className="footer">
                All rights reserved.
            </footer>
        </div>
      </BrowserRouter>
  );
}

export default App;

如果信息太多或太少，我很抱歉，这是我在这里的第一篇文章。

Answer 1

您没有将任何道具传递给ProductScreen 组件，而是这样做

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

function ProductScreen(props) {
    // console.log(props.match.params.id);
    const { id } = useParams();
    console.log(id);
    return <div>ProductScreen</div>
}
export default ProductScreen;