React路由器dom返回空白页

Question

在App.js中，我尝试了react-router-dom，但它返回空白页。我尝试添加(exact(，也添加了(Switch(，但没有任何效果，需要注意的是，我也用(element(替换了(component(，但什么都没有效果。

import React from "react";
import "./styles.css"
import Header from "./header";
import Footer from "./Footer";
import Apps from "./Apps";
import Games from "./Games";
import SearchBar from "./SearchBar";
import BookData from "./Data.json";
import { Route, BrowserRouter } from "react-router-dom"
function App() {
return (
<div>
<BrowserRouter>
<Header />
<div className="App">
<SearchBar placeholder="Enter App Name..." data={BookData} />
</div>
<Apps />
<Footer />
<Route path="/games" element={<Games />} />
</BrowserRouter>
</div>
)
}
export default App

Answer 1

如果您使用的是react路由器dom v6。您应该将单个路由包裹在<Routes></Routes>中。试试下面的代码，

import React from "react";
import "./styles.css"
import Header from "./header";
import Footer from "./Footer";
import Apps from "./Apps";
import Games from "./Games";
import SearchBar from "./SearchBar";
import BookData from "./Data.json";
import { Route, BrowserRouter, Routes } from "react-router-dom"
function App() {
return (
<div>
<BrowserRouter>
<Header />
<div className="App">
<SearchBar placeholder="Enter App Name..." data={BookData} />
</div>
<Apps />
<Footer />
<Routes>
<Route path="/games" element={<Games />} />
</Routes>
</BrowserRouter>
</div>
)
}
export default App

如果您使用的是react路由器dom v5。您应该将单个路由包裹在<Switch></Switch>中。

Answer 2

因为我相信您只能将Route组件放置在browseRouter组件中类似：

<div>
<Header />
<BrowserRouter>
<div><div/> //this is not allowed inside BrowseRouter 
<Route path="/games" element={<Games />} />
<Route path='/component' element={<component/>}
</BrowserRouter>
</div>