React - Невозможно прочитать свойства неопределенного (чтение 'params')

Подобный вопрос об этом же учебнике уже задавался здесь. К сожалению, это более продвинутая часть учебника, и я, похоже, не понимаю этого 

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'params')
    at fetchProduct (ProductScreen.js:16:1)
    at ProductScreen.js:19:1
    at commitHookEffectListMount (react-dom.development.js:23150:1)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:1)
    at commitPassiveMountEffects_complete (react-dom.development.js:24891:1)
    at commitPassiveMountEffects_begin (react-dom.development.js:24878:1)
    at commitPassiveMountEffects (react-dom.development.js:24866:1)
    at flushPassiveEffectsImpl (react-dom.development.js:27039:1)
    at flushPassiveEffects (react-dom.development.js:26984:1)
    at performSyncWorkOnRoot (react-dom.development.js:26076:1)

Мой ProductScreen.js:

function ProductScreen({ match }) {

    const [product, setProduct] = useState([])

    useEffect(() =>{
        async function fetchProduct() {
            const { data } =  await axios.get(`/api/products/${match.params.id}`)
            setProduct(data)
        }
        fetchProduct()

    },[])

My App.js:

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

export default App;

Спасибо за помощь!

Проблема связана с match реквизитом. Не совсем понятно, откуда вы это взяли. Чтобы лучше ответить на этот вопрос, может быть, вы можете добавить ссылку, например, на codesandbox или что-то подобное, где мы можем воспроизвести проблему.

Если вы используете react-router-dom (react-router 6), то вы можете сделать что-то вроде этого.

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

function ProductScreen() {

    const [product, setProduct] = useState([])
    const { id } = useParams();

    useEffect(() =>{
        async function fetchProduct() {
            const { data } =  await axios.get(`/api/products/${id}`)
            setProduct(data)
        }
        fetchProduct()

    },[])
    
    return (<div></div>);
    
}

Вернуться на верх