yarn add react-router-dom

import { BrowserRouter } from 'react-router-dom'

ReactDOM.render((
  <BrowserRouter>
    <App/>
  </BrowserRouter>
), document.getElementById('root'))

export default function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/users">Users</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/about" element={<About />} />
        <Route path="/users" element={<Users />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </div>
  );
}

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

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

const Main = () => (
  <main>
    <Switch>
      <Route path='/' component={Home}/>
      <Route path='/students' component={Students}/>
    </Switch>
  </main>
)

<Routes>
  <Route path='/' element={<Home />}/>
  <Route path='/students' element={<Students/>}/>
</Routes>

<Routes>
  <Route path="teams/:teamId" element={<Team />} />
  <Route path="teams/new" element={<NewTeamForm />} />
</Routes>

function App() {
 return (
   <BrowserRouter>
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="/topics" element={<Topics />}>
         <Route path="list" element={<TopicsList />} />
         <Route path=":id" element={<TopicPage />} />
       </Route>
     </Routes>
   </BrowserRouter>
 );
}

import { Outlet } from 'react-router-dom'

function Topics() {
 return (
   <div>
     <h1>Topics page</h1>

     <Outlet />
   </div>
 );
}

<Route path="/topics/*" component={Topics} />

function Topics() {
 return (
   <div>
     <h1>Topics page</h1>

     <Routes>
       <Route path="list" element={<TopicsList />} />
       <Route path=":id" element={<TopicPage />} />
      </Routes>
   </div>
 );
}

function Topics() {
 return (
   <div>
     <h1>Topics page</h1>

     <Routes>
       <Route index element={<TopicsList />} />
       <Route path=":id" element={<TopicPage />} />
      </Routes>
   </div>
 );
}

<Route path="/topics/*" component={Topics} />