reactjs - react 路由器返回相同的元素

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 函数 Prop ，它们被替换为采用 ReactElement 的单个 element Prop 。

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