React Router组件未显示

Question

我在react-router-dom上遇到了一个问题，组件没有显示。我已经托运了包裹。react-router-dom的Json已经安装好了，如下所示:

"react-router-dom": "^6.3.0",

这是我的App

import React from "react";
import Home from "./Home.js"
import More from "./More.js"
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

function App() {
return (
<Router>
<Routes>
<Route exact path="/" element={<Home/>}/>
<Route exact path="/more" element={<More/>}/>
</Routes>
</Router>
);
}
export default App;

我觉得我做的一切都是正确的，因为我也把这个添加到我的index.js

ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);

但是我的组件仍然没有显示

Answer 1

问题是你不能在另一个路由器中呈现路由器，你有:

<BrowserRouter>
<App />
</BrowserRouter>

隔层:

<BrowserRouter>
<Router>
<Routes>
<Route exact path="/" element={<Home/>}/>
<Route exact path="/more" element={<More/>}/>
</Routes>
</Router>
</BrowserRouter>

尝试删除其中一个路由器

Answer 2

你可以在app.js中删除路由器(BrowserRouter)。保持在index.js中，应用程序就会正常工作。

App.js文件

import React from "react";
import Home from "./Home.js"
import More from "./More.js"
import { Route, Routes } from 'react-router-dom'

function App() {
return (
<Routes>
<Route exact path="/" element={<Home/>}/>
<Route exact path="/more" element={<More/>}/>
</Routes>
);
}
export default App;

Index.js文件

ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);