React Router V6.17页面无法显示求助：浏览器加载后无内容

导致页面完全无内容的核心问题有两个：

• 路由规则未被正确识别：在react-router-dom v6版本中，所有<Route>组件必须嵌套在<Routes>组件内部才能生效，你的代码直接将Route放在Container中，路由逻辑不会被触发，因此HomeScreen和ProductScreen都无法渲染。
• 属性拼写错误：<main>标签的属性写成了clasName，正确写法应为className，虽然这不会直接导致页面空白，但会影响样式的正常应用，需要修正。

修正后的完整代码 #

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

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

export default App;

关键修改说明 #

1. 从react-router-dom中新增导入Routes组件
2. 将所有<Route>组件包裹在<Routes>标签内部，让路由规则被正确解析
3. 修正<main>标签的clasName为className，确保样式属性生效

修改完成后，浏览器加载时会正常渲染HomeScreen首页，访问/product/:id路径时也能显示ProductScreen商品页。

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