使用 reactdom 在 React 中渲染组件时出现问题

Question

我一直在想办法解决这个问题，但我做不到。 ReactDom 带我到路径，但不渲染我的组件/屏幕“ProductScreen.js”。控制台没有错误！！

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './bootstrap.min.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import {  Container} from 'react-bootstrap';
import { BrowserRouter as Router, 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>
            <Route path='/product/id' component={ProductScreen}/>
            <Route path='/' component={HomeScreen} exact/>
          </Container>
        </main>
      <Footer />
    </Router>
  );
}

export default App;

ProductScreen.js

import React from 'react';

function ProductScreen() {
    return (
        <h1>Product</h1>
    )
}

export default ProductScreen;