No history yet

Introduction to React Router

Navigating Without Reloading

Single-Page Applications (SPAs), like those built with React, have a neat trick up their sleeve. They can update content and change what you see on the screen without a full page reload. This makes them feel fast and fluid, like a desktop application. But it also presents a challenge: how do you handle navigation? In a traditional website, going to /about or /contact means requesting a completely new HTML file from the server. In an SPA, you're already on the only page you'll ever get.

This is where routing comes in. We need a way to manage what the user sees, update the URL in the browser's address bar, and handle the back and forward buttons—all without actually leaving the page. This process is called client-side routing because it's managed by JavaScript running in the browser (the client), not the server.

In React, libraries like React Router provide the tools necessary to implement client-side routing seamlessly.

React Router is the standard library for routing in React. It allows you to build a declarative routing system, meaning you can just state which components should render for which URL paths, and the library handles the rest. It keeps your application's UI perfectly in sync with the browser's URL, creating a smooth and predictable user experience.

The Core Components

To get started with React Router, you only need to understand three core components. They work together to create the foundation of your app's navigation.

Let's look at what each one does.

  1. <BrowserRouter>: This is the parent component that should wrap your entire application, or at least the part of it that needs routing. It connects your app to the browser's URL, enabling navigation. You'll typically place this in your main App.js or index.js file.

  2. <Routes>: Think of this as a container for all your possible routes. When the URL changes, <Routes> looks through all its child <Route> elements and finds the one that best matches the current URL. It then renders the component associated with that match. Only one route can be active at a time.

  3. <Route>: This is where the magic happens. A <Route> component maps a specific URL path to a specific React component. It has two main props: path, which defines the URL path, and element, which specifies the component to render when that path is matched.

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

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

export default App;

In the example above, if a user visits the root of your site (your-site.com/), React Router will render the Home component. If they visit your-site.com/about, it will render the About component. This all happens without a single full page refresh.

These three components form the backbone of navigation in any modern React application. Understanding their roles is the first step toward building complex, multi-view SPAs.