反应路由器返回相同的元素

Question

我正在使用 react-router 来显示一些页面

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 功能道具，它们被单个 element 道具取代ReactElement.

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

反应路由器返回相同的元素

React router returning the same element

reactjs

react-router

react-router-dom