React Router Basics

Analogy categoryAnalogies

Introduction

React is a single-page application (SPA) library, meaning the browser loads one HTML page and JavaScript swaps content in and out as the user navigates. React Router is the most widely used routing library for React, letting you map URL paths to components so users can navigate between views without a full page reload. It keeps the URL in sync with the UI, enabling bookmarking, browser back/forward buttons, and deep linking.

🏏

Cricket analogy: A stadium's single big screen (SPA) swaps between batting stats, bowling figures, and replays without switching to a whole new screen; a smart director (React Router) maps each remote-control button to the right view so viewers can jump straight to "bowling figures" via a saved channel preset (deep link).

Syntax

jsx

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

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

Explanation

BrowserRouter wraps the whole application and uses the HTML5 History API to keep the UI synced with the URL. Inside it, Routes acts as a container that looks through its child Route elements and renders the first one whose path matches the current URL. Each Route takes a path prop and an element prop, which is the JSX to render for that path. A path of "*" acts as a catch-all for unmatched routes, commonly used for a 404 page. Link and NavLink render anchor tags that update the URL without triggering a full page reload; NavLink additionally lets you style the currently active link via a className function.

🏏

Cricket analogy: BrowserRouter is the stadium's master control system syncing the big screen with the official match feed; Routes is the director who scans a list of camera feeds and shows the first one matching the current play type, with a generic "highlights reel" (catch-all "*") for anything unclassified, while the remote's preset buttons (Link/NavLink) switch feeds instantly and light up (active className) for whichever feed is currently showing.

Example

jsx

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

function NavBar() {
  return (
    <nav>
      <NavLink
        to="/"
        end
        className={({ isActive }) => (isActive ? 'active-link' : 'link')}
      >
        Home
      </NavLink>
      <NavLink
        to="/about"
        className={({ isActive }) => (isActive ? 'active-link' : 'link')}
      >
        About
      </NavLink>
    </nav>
  );
}

Output

Clicking 'Home' or 'About' updates the browser URL to '/' or '/about' respectively and instantly swaps the rendered component without reloading the page. The NavLink pointing to the currently active route automatically receives the 'active-link' class, so you can visually highlight the current page in the navigation bar. The 'end' prop ensures the Home link is only marked active on an exact match of '/', not on every nested path that starts with '/'.

🏏

Cricket analogy: Clicking "Live Score" or "Squad" instantly swaps the stadium screen's content without a reload, and the "Live Score" button lights up (active-link class) only when you're exactly on the live page, not on every sub-page starting with "live" (the "end" prop equivalent).

Key Takeaways

BrowserRouter must wrap your app to enable client-side routing with the History API.
Routes renders the first matching Route based on the current URL path.
Use Link or NavLink instead of <a> tags to avoid full page reloads.
A Route with path="*" is commonly used to render a fallback 404 page.
NavLink supports an isActive-based className function to style the current route.

Practice what you learned

1. Which component must wrap your application to enable React Router's client-side routing?

2. What does a Route with path="*" typically render?

3. Why should you use Link instead of a plain <a> tag for internal navigation?

4. What prop does NavLink provide that a plain Link does not?

Was this page helpful?

Dynamic Routing in React

Related Study Notes in Web Development

Browse all study notes

Web Development

WebSockets Study Notes

Web Development · 30 topics

Web Development

WebAssembly Study Notes

WebAssembly · 30 topics

Web Development

gRPC Study Notes

Protocol Buffers · 30 topics

Web Development

Spring Boot Study Notes

Java · 30 topics

Web Development

Flask Study Notes

Python · 30 topics

Web Development

Django Study Notes

Python · 30 topics

Topics covered

#React#ReactJsStudyNotes#WebDevelopment#ReactRouterBasics#Router#Syntax#Explanation#Example#StudyNotes#SkillVeris

Introduction

Syntax

Explanation

Example

Output

Key Takeaways

Practice what you learned

You May Also Like

Related Reading

Related Study Notes in Web Development

Topics covered