路由，路由在 React 中不起作用 - 浏览器中的空白页面答案

【问题标题】：Route, Routes doesn't work in React - Blank page in Browser路由，路由在 React 中不起作用 - 浏览器中的空白页面
【发布时间】：2022-08-17 17:07:21
【问题描述】：

我知道这个问题已经被问过很多次了。但遗憾的是，在实施了所有可能的解决方案后，在使用 Route、Routes 后，我仍然得到一个空白的浏览器页面。

我的代码：

import { Container } from \'react-bootstrap\'
import { BrowserRouter as Router, Route, Routes } from \'react-router-dom\';
import Header from \'./components/Header\'
import Footer from \'./components/Footer\'

import HomeScreen from \'./screens/HomeScreen\'

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

export default App;

谢谢你的帮助！

您检查浏览器控制台是否有错误？
该属性现在是 element 而不是 component。（另外，不要将其他元素放在 <Routes> 中）

标签： javascript reactjs react-router react-dom

【解决方案1】：

我认为你不应该在<Routes> 组件中嵌套除<Route> 以外的元素。当位置发生变化时，<Routes> 会查看他所有的<Route> 孩子并选择适合的孩子。您将<Route> 元素嵌套在<Header> 中，所以这可能就是问题所在。尝试重新排列结构并将路线移动到顶层。

【讨论】：