React Router 显示空白页面

Question

服务器启动时，站点显示空白页面。我按照文档中的说明进行了所有操作，但错误并没有消失。我试图从代码中删除 <Route path="/" component={HomeScreen} exact/> 并只留下 <HomeScreen />，在那一刻一切都开始呈现它应该的样子，但是，相应地，Route 的整个本质不起作用。完全删除并重新安装模块和包，但一切仍然无法正常工作。

App.js

import { Container } from 'react-bootstrap'
import Header from './components/Nheader'
import Footer from './components/Nfooter'
import HomeScreen from './screens/HomeScreen'
import { BrowserRouter as Router, Route } from 'react-router-dom'


function App() {
  return (
    <Router>
      <Header />
      <main className='py-5'>
        <Container>
          <Route path="/" component={HomeScreen} exact/>
        </Container>
      </main>
      <Footer />
    </Router>
  );
}

export default App;

HomeScreen.js

import React from 'react'
import { Col, Row} from 'react-bootstrap'
import products from '../products'
import Product from '../components/Product'

function HomeScreen() {
  return (
    <div>
        <h1>Last Products</h1>
        <Row>
            {products.map(product => (
                <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                    <Product product={product} />
                </Col>
            ))}
        </Row>
    </div>
  )
}

export default HomeScreen

Answer 1

第一个问题： 安装了两个 react-router-dom 个模块（需要删除一个）

第二题： 在react-router-dom6版本中，需要写这段代码：

  <Routes>
    <Route path="/" element={<HomeScreen />}></Route>
  </Routes>

React Router 显示空白页面

React Router display blank page

reactjs

react-router