React Router: Client-Side Navigation

From Pages to Views: Understanding Client-Side Routing

Think about a traditional website, like a simple blog or a news site. When you click a link, your browser makes a new request to a server, which sends back a brand-new HTML document. The entire page reloads. This is called Server-Side Routing (SSR).

In contrast, a React application is a Single-Page Application (SPA). Your browser loads the application (a single HTML file and a bundle of JavaScript) only once. From then on, when you navigate, you aren't fetching new pages from a server. Instead, the JavaScript running in your browser dynamically updates the content, swapping components in and out to create the illusion of changing pages. This is Client-Side Routing (CSR). It's faster, smoother, and feels more like a native desktop or mobile app.

To manage this process, we need a routing library.

As the article mentions, building this routing logic from scratch is complex. That's why we use React Router, a powerful and flexible library that handles all the heavy lifting for us. It keeps our UI in sync with the URL in the browser's address bar.

Setting Up React Router: The Modern Approach

There are a few ways to configure React Router. We will use the latest and recommended approach, which is more powerful and aligns with modern React development practices. This setup is done in your project's main entry point, which for a Vite project is src/main.jsx.

1. Installation

First, open your project's terminal and install React Router:

npm install react-router-dom

This package includes everything you need for routing in a web application.

2. Configuration in main.jsx

The modern setup involves two key imports from react-router-dom:

• createBrowserRouter: A function used to define your application's routes using JavaScript objects.
• RouterProvider: A component that takes your router configuration and makes it available to your entire application.

The following video provides a clear walkthrough of this initial setup.

Creating Your First Route

After following the video, your main.jsx has a router, but it's empty! The router needs to know which component to render for a given URL path. We define this relationship by passing an array of route objects to createBrowserRouter.

Each route object needs at least two properties:

• path: A string representing the URL path (e.g., "/" for the home page, "/about" for an about page).
• element: The JSX element (i.e., the React component) to render when the path matches.

Let's continue with the same video to see how to define our first route for the homepage.

After this step, your src/main.jsx file should look something like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx'; // Your main app component
import './index.css';

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

// 1. Create the router configuration
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />, // Render the App component for the root path
  },
  // We will add more routes here in the next lesson!
]);

// 2. Render the RouterProvider instead of your App component
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

With this configuration, you have successfully set up client-side navigation! When you run your app and visit the root URL (http://localhost:5173/), React Router will match the "/" path and render your <App /> component.

A Note on Other Approaches

As you browse tutorials or work on existing projects, you will very likely encounter another way of setting up routes using JSX components like <BrowserRouter>, <Routes>, and <Route>. This was the standard method before the createBrowserRouter API was introduced.

While the JSX-based approach is still valid and works well, the object-based createBrowserRouter is now recommended by the React Router team because it's more powerful, enabling advanced features like data loading, actions, and error handling that we may explore later in the course. For now, just be aware that both methods exist.

Conclusion

In this lesson, you took the first and most crucial step into the world of client-side routing with React. You've prepared your application to handle navigation between different views without full page reloads.

Key Takeaways:

• Client-Side Routing (CSR) is the technique used in Single-Page Applications (SPAs) to simulate page navigation by dynamically updating the UI with JavaScript, rather than fetching new pages from a server.
• React Router is the standard library for implementing routing in React.
• The modern and recommended way to set up React Router involves:
  1. Installing react-router-dom.
  2. Using createBrowserRouter in main.jsx to define your routes as an array of objects.
  3. Using the <RouterProvider> component to provide your router configuration to the application.

Next Up:

Our application is now router-enabled, but it only has one route. That's not very useful for navigation! In the next lesson, we will build on this foundation. You'll learn how to define multiple routes for different pages and, crucially, how to use the Link component to create navigation elements (like a navbar) that allow users to seamlessly move between these routes.