A little help with basic React Router

I saw 2 different implementations, one in the official tutorial on react router v6, and the other was a youtube video.

For a component that persists (let’s call it <Navbar>), do we do:

<Navbar> <Routes> <Route path=”/” element={<Home />} /> <Route path=”/profile” element={<Profile />} /> </Routes> </Navbar> Navbar.js: <Link to=”/”>blah</Link> <Link to=”/profile”>blah</Link> {children} or <Routes> <Route path=”/” element={<Navbar />} /> <Route index element={<Home />} /> <Route path=”profile” element={<Profile />} /> </Route> </Routes> Navbar.js: <Link to=”/”>blah</Link> <Link to=”/profile”>blah</Link> <Outlet />

Can someone explain the difference between these 2?