Routes and Links

<Routes> picks the first <Route> whose path matches the URL. <Link> changes the URL without reloading (never use <a href> for internal links: it reloads the page).

import { Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

export default function App() {
  return (
    <>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </>
  );
}

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

<NavLink to="/about" className={({ isActive }) => (isActive ? 'active' : '')}>
  About
</NavLink>