Part 25: React Router v6 Fundamentals & Navigation

In a Single Page Application (SPA), routing is handled client-side. React Router is the standard routing library for React.

1. Installation

npm install react-router-dom

2. Basic Setup: Routes and Route Hierarchy

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

function Home() {
  return <h2>Welcome to the Home Page</h2>;
}

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

export default function App() {
  return (
    <BrowserRouter>
      <nav className="navbar flex gap-4 p-4 border-b">
        {/* NavLink automatically receives an .active class when matching current URL */}
        <NavLink 
          to="/" 
          className={({ isActive }) => isActive ? "font-bold text-blue-600" : "text-gray-600"}
        >
          Home
        </NavLink>
        <NavLink 
          to="/about" 
          className={({ isActive }) => isActive ? "font-bold text-blue-600" : "text-gray-600"}
        >
          About
        </NavLink>
      </nav>

      <main className="p-6">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </main>
    </BrowserRouter>
  );
}

3. <Link> vs Standard <a> Anchor Tags

Always use <Link> or <NavLink> instead of standard <a href="...">: - <a href="...">: Triggers a full browser reload, discarding in-memory state and re-downloading JavaScript bundles. - <Link to="...">: Intercepts navigation client-side via the HTML5 History API, keeping the app fast and smooth.

Key Takeaways

• React Router manages client-side navigation without full page reloads.
• Use NavLink for automatic active styling in navigation bars.
• Use Routes and Route to declare URL path mappings.

In Part 26, we will handle Dynamic Routes, URL Parameters, and Query Strings!