Not able to render the data inside the <Routes> in App.js

Question

import React from 'react';
import { Routes, Route } from 'react-router-dom';

import Navs from './components/Navs';
import Home from './pages/Home';
import Starred from './pages/Starred';

function App() {
return (
<div>
<Navs />

<Routes>
<Route exact path="/">
<Home />
</Route>

<Route exact path="/starred">
<Starred />
</Route>

<Route>
<div>Not Found</div>
</Route>
</Routes>
</div>
);
}

export default App;

As per the update, the <Switch> has been changed to <Routes> but the issue is, the data inside the <Route> is not being rendered on the webpage.
Can someone point out the cause/error regarding this?

Answer 1

I tried doing so and got error : You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

So tried various hit and trial approaches .. and Somehow I ended up solving this problem by commenting out the 404, but I don't know the reason how it ended up working out.
My guess is that v6 allows self-closing <Route> and when I commented the <Route></Route> the code worked.

If you know the correct reasoning behind this, do let me know. Thank You.

Following are the changes I made in App.js and index.js:

function App() {
return (
<div>
<Navs />

<Routes>
<Route path="/" element={<Home />} />
<Route path="/starred" element={<Starred />} />
{/* <Route>
<div>Not Found</div>
</Route> */}
</Routes>
</div>
);
}

index.js :

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);

Answer 2

Try this :
        <Route exact path="/" element={<Home />} />

https://github.com/Roland-Foucher/atelier-cuir-fuchats-front/blob/main/src/components/App.js

Answer 3

Surround all div with <BrowserRouter> :

function App() {
return (
<BrowserRouter>
<div>
<Navs />

<Routes>
<Route exact path="/" element={<Home />} />

...

</Routes>
</div>
</BrowserRouter>
);
}

export default App;

Answer 4

Roland the problem remains the same. I'm still unable to render my components inside the <Route> What could be the problem?