React Router：如何修复 BrowserRouter 显示空白屏幕

Question

我是 JS React 的新手，目前正在研究项目的路由部分。我正在尝试利用从react-router-dom包导入的BrowserRouter函数。但在发出npm start后，我​​得到的只是一个空白的白屏，如图 (2) 所示。如果我使用我在图像 (1) 上注释掉的代码直接调用我的 * LandingPage.js，它会输出图像 (3) 中所示的屏幕，这就是我尝试使用 BrowserRouter 输出的内容输出的内容。我错过了什么吗？

1.)

2.)

3.)

Answer 1

如果您有react-router-domV6，那么您必须同时使用 Routes 和 Route 才能使其正常工作。

import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";

并更新App功能。

function App() {
  return (
     
      <BrowserRouter>
       <Header />
       <main className="py-1">
        <Routes>
            <Route path="/" element={<LandingPage/>} />
        </Routes>
      
      </main>
    </BrowserRouter>
  );
}

export default App;

该文档有一个很好的例子来理解这一点

注意：如果您使用的是react-router-domv5 或更低版本，则导入并使用Switch而不是Routes用于此目的， Switch在 v6 中已被折旧。