React路由器返回相同的元素

Question

我正在使用react路由器来显示一些页面

function App() {
return (
<Router>
<Routes>
<Route exact path="/" element={<HomePage />} />
<Route  path ="about" component={<AboutPage />}  />
</Routes>
</Router>
);
}

但第二条路径是要么在上面的代码中显示一个空白页面，要么显示相同的主页，如果我使用下面的

<Routes>
<Route exact path="/" element={<HomePage />} >
<Route path ="about" component={<AboutPage />}  />
</Route>
</Routes>
</Router>

获取不同页面的正确方法是什么？

Answer 1

第二个路径仍然需要在element道具上渲染。在react-router-dom@6中，Route组件不再具有component、render和children功能道具，取而代之的是采用ReactElement的单个element道具。

function App() {
return (
<Router>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="about" element={<AboutPage />} />
</Routes>
</Router>
);
}