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

Question

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

1.)

2.)

3.)

Answer 1

如果您有 react-router-dom V6，那么您必须同时使用 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;

Documentation有一个很好的例子可以理解

Note: If you are using react-router-dom v5 or below then Import and use Switch instead of Routes for this purpose, Switch is been depreciated in v6.

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

React Router: How to fix BrowserRouter showing the blank screen

javascript

reactjs

react-router

react-router-dom