How do you create a clickable link to navigate between pages using React Router?

Instead of a regular HTML anchor tag, which would cause a full page reload, React Router provides a Link component that changes the current page smoothly using client side routing, while still looking and working like a normal link to the user.

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

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