React router returning the same element

February 19, 2022

I am using react-router to display some pages

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

But the second path is either display a blanck page in abouve piece of code or display the same homepage if i use like below

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

</Router>

Which is the correct method to use to get the different pages?

>Solution :

The second path still needs to be rendered on the element prop. In react-router-dom@6 the Route components no longer have component, and render and children function props, they were replaced by the single element prop taking a ReactElement.

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