React Router

npm install react-router-dom

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

import { Link } from 'react-router-dom';

function Nav() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

import { useParams } from 'react-router-dom';

function UserProfile() {
  const { id } = useParams(); // reads the :id segment from the current URL
  const { data: user } = useFetch(`/api/users/${id}`); // the custom hook from earlier
  return user ? <h1>{user.name}</h1> : <p>Loading...</p>;
}

import { useNavigate } from 'react-router-dom';

function LoginForm() {
  const navigate = useNavigate();

  function handleSubmit(e) {
    e.preventDefault();
    navigate('/dashboard');
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}