Client-Side Routing for Multi-Page Applications

From Multiple Pages to a Single-Page App

In a traditional multi-page website, clicking a link sends a request to a server, which then returns a brand new HTML document. This process results in a full page refresh.

In a React SPA, the browser loads a single HTML file initially. From then on, React takes control, dynamically rendering different components to give the illusion of multiple pages. This is where client-side routing comes in. React Router intercepts navigation requests and, instead of asking the server for a new page, it simply swaps out the components being displayed. This results in a faster, smoother user experience, much like a native mobile or desktop app.

Setting Up React Router

To get started, the first step is to add React Router to our project.

1. Installation: Open your terminal in the project's root directory and run the following command:

   npm install react-router-dom
   

   This package provides the necessary components and hooks for routing in a web environment.

2. Configuration: We need to make the routing functionality available to our entire application. The modern and recommended way to do this involves creating a router configuration and providing it to your app. We'll do this in your main entry file, src/main.jsx.

Let's look at a comprehensive guide that covers the initial setup and the core components we'll be using.

Defining Your Application's Routes

With the router set up, we now need to tell it which component to render for each URL path. We'll define our routes using a combination of createBrowserRouter, createRoutesFromElements, and the Route component. This approach is highly readable and scalable.

A key pattern for SPAs is the use of a shared layout—for example, a navigation bar that should appear on every page. We can achieve this by creating a "layout route" that renders the shared UI and an <Outlet /> component. The <Outlet /> acts as a placeholder where the content of the child routes will be rendered.

The following video provides a clear, practical walkthrough of setting up a modern route configuration with a shared layout.

After following this, your App.jsx (or a dedicated router.jsx file) will contain the map of your entire application's structure. For example:

// Example router configuration in App.jsx

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";

// Layout and Page Components
import RootLayout from "./layouts/RootLayout";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route index element={<HomePage />} />
      <Route path="about" element={<AboutPage />} />
      {/* Add routes for your other pages here */}
    </Route>
  )
);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

Creating Navigation with Link and NavLink

Our routes are defined, but users have no way to navigate between them. We need to replace standard <a> tags with React Router's Link component to enable client-side navigation.

For navigation bars, the NavLink component is even better. It's a special version of Link that knows whether or not it is "active" based on the current URL. This allows us to easily apply styles (like changing the color or font weight) to the link corresponding to the page the user is currently on.

Let's see how to build a navigation bar using NavLink.

By placing a <Navbar /> component containing these NavLinks inside your RootLayout.jsx (before the <Outlet />), you will have a persistent navigation bar across all pages of your application.

Practical Exercise

Now, it's your turn to apply these concepts.

1. Create Page Components: If you haven't already, move the UI for each main section of your application into its own component file inside a src/pages directory (e.g., HomePage.jsx, DashboardPage.jsx, ProfilePage.jsx).
2. Create a Layout: Build a RootLayout.jsx component in a src/layouts folder. This component should render your main navigation bar and an <Outlet />.
3. Build the Navbar: Create a Navbar.jsx component in src/components. Inside it, use NavLink components to create links to your main pages (/, /dashboard, /profile, etc.).
4. Configure the Router: In your App.jsx or main.jsx, use createBrowserRouter to define your route structure, nesting your page routes inside the RootLayout route.
5. Add Styling: In your main CSS file (index.css), add a style rule for the active class to give your active navigation links a distinct appearance (e.g., nav a.active { color: red; }).

Conclusion

You have now successfully wired your static components into a functional Single-Page Application. Users can navigate between different views seamlessly, and you have a scalable structure for adding new pages and shared layouts in the future.

Key Takeaways:

• Client-side routing with React Router enables navigation in a Single-Page Application without full-page reloads.
• The modern way to configure routes is with createBrowserRouter and RouterProvider.
• Shared layouts (like navbars and footers) are created using a parent layout route that renders an <Outlet /> component as a placeholder for child route content.
• The Link component is used for client-side navigation, while NavLink is a specialized version that helps style the currently active link.

Next Up:

Our application now has a solid structure and navigation. The next step is to bring it to life with interactivity. In the following lesson, we will focus on adding and managing user input through forms, covering state management for form fields and implementing form submission logic.