React Router v6 setup and basic routing

Client-Side Routing with React Router v6

React Router enables navigation between views in a Single Page Application without full page reloads. The browser URL changes but JavaScript swaps components instead of fetching a new HTML page.

Setup

npm install react-router-dom

Basic Routing

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <NavLink to="/">Home</NavLink>
        <NavLink to="/about">About</NavLink>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

NavLink automatically adds an active class to the current route link. Link is a plain anchor that uses client-side navigation. path="*" is a catch-all for 404 routes.

Programmatic Navigation

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

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

  function handleLogin() {
    // after login logic...
    navigate('/dashboard');
  }

  return <button onClick={handleLogin}>Login</button>;
}