Skip to main content

React Router Setup: Configure Client-Side Routing

React Router is the de facto standard library for client-side routing in React applications. It allows you to build single-page applications with multiple "views" or "pages," each with a unique URL, without full page reloads. This first part covers installing React Router and configuring the three core components: BrowserRouter (wraps your app), Routes (defines route groups), and Route (maps a URL path to a component).

Key Takeaways​

  • React Router enables client-side routing: Navigate between multiple views without full page reloads, keeping your app fast and responsive.
  • BrowserRouter wraps your entire app: It syncs your UI with the browser's URL using the HTML5 history API.
  • Routes and Route define your app's pages: Routes groups multiple routes; each Route maps a path (e.g., /about) to a component.
  • Installation is simple: npm install react-router-dom adds the library to your project.
  • Basic setup takes minutes: Wrap your app, define routes, and your navigation is ready.

Why React Router? Understanding Client-Side Routing​

In a traditional multi-page application, navigating to a new page means a full reload from the server—the entire HTML, CSS, and JavaScript are fetched again. In a single-page application (SPA), the app loads once, and subsequent "pages" are rendered dynamically in the browser.

React Router manages this client-side routing. It lets you:

  • Define multiple "pages" in a single JavaScript bundle
  • Update the URL without a full page reload
  • Keep UI state (like scroll position or form data) when navigating between routes
  • Create fast, smooth user experiences with no server round-trips

Installing React Router​

First, add React Router to your project:

npm install react-router-dom

This installs React Router v6 (the current major version). The package is approximately 40 KB gzipped, a small price for professional routing.

The Three Core Components​

React Router's configuration relies on three main components:

1. BrowserRouter​

Wraps your entire application and syncs your UI with the browser URL using the HTML5 history API. It must be the outermost routing component.

2. Routes​

A container that groups multiple Route components. Only one route matches at a time based on the current URL.

3. Route​

Maps a URL path to a component. It has two key props:

  • path — The URL path (e.g., /about, /contact)
  • element — The React component to render when the path matches

Basic Setup: Complete Example​

Here's how to set up React Router in your project:

src/index.js (or main.jsx in Vite projects):

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

src/App.jsx:

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

// Create simple page components (or import from separate files)
const Home = () => <h1>Welcome Home</h1>;
const About = () => <h1>About Us</h1>;
const Contact = () => <h1>Contact Us</h1>;

function App() {
  return (
    <div>
      {/* Navigation bar would go here */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
}

export default App;

Step-by-Step Explanation:

  1. In index.js, wrap your <App /> component with <BrowserRouter />. This enables routing for your entire application.
  2. In App.jsx, import Routes and Route from react-router-dom.
  3. Inside <Routes>, define individual routes with <Route> components.
  4. Each route specifies a path (like /about) and an element (the component to render).

Now, run your app and navigate to /, /about, or /contact in the browser—the correct component renders without a page reload.

Understanding the Flow​

When a user visits a URL:

  1. BrowserRouter detects the URL — It reads the current path from the browser's address bar.
  2. Routes evaluates all Route components — It checks which path matches the current URL.
  3. The matching Route renders — The element component is displayed. All other routes are hidden.
  4. No page reload — React updates the DOM in place. Smooth, fast navigation.

Best Practices for Early Routing Setup​

  • Keep BrowserRouter at the root: Wrap it around your entire app, typically in index.js, not in child components.
  • Define routes in App.jsx or a dedicated routing file: Organize route definitions in one place for clarity.
  • Use separate component files: Create pages/Home.jsx, pages/About.jsx, etc., and import them into your route definitions.
  • Add navigation links later: Once routes are set up, add <Link> or <NavLink> components for navigation (covered in part 2).

Frequently Asked Questions​

What's the difference between BrowserRouter and other router types (HashRouter, MemoryRouter)?​

BrowserRouter uses the HTML5 history API and clean URLs like example.com/about. HashRouter uses URL fragments like example.com/#/about and works without server configuration. MemoryRouter stores history in memory (useful for testing). For modern web apps, BrowserRouter is the standard choice.

Can I have nested routes?​

Yes, React Router v6 supports nested routes with the <Outlet> component. Define a parent route, and child routes render inside the parent's <Outlet>. This is covered in advanced routing articles.

What if no route matches the current URL?​

By default, nothing renders if no route matches. You can add a "404" route using <Route path="*" element={<NotFound />} /> to catch all unmatched paths.

How do I navigate between routes programmatically?​

Use the useNavigate Hook: const navigate = useNavigate(); navigate('/about');. This is covered in part 2.

Do I need to specify the entire URL in the path prop?​

No, only the path relative to your domain. If your app is at example.com, use path="/about", not path="https://example.com/about".

Conclusion​

You've now set up React Router—the foundation for building sophisticated single-page applications. With BrowserRouter, Routes, and Route configured, your app is ready for multi-page navigation without full page reloads. Part 2 will cover adding navigation links and exploring more advanced routing patterns.

Further Reading​