Chapter 8: Navigating with React Router

Welcome back to "React Revolution"! We’ve styled our components and made them look amazing. Now, let's add some navigation to our application using React Router. In this chapter, we’ll learn how to set up and use React Router to create a seamless, single-page application experience.

8.1 What is a React Router?

React Router is a powerful library that helps you handle navigation in React applications. It enables you to create dynamic routing, making your app feel like a traditional multi-page application while staying single-page. With React Router, users can navigate through your app without full-page reloads, providing a smooth user experience.

8.2 Setting Up React Router

First, you need to install React Router. Open your terminal and run:

npm install react-router-dom

Once installed, you can start using React Router in your application.

8.3 Basic Setup

Let’s set up a simple React application with React Router. We'll create a basic structure with a home page, an about page, and a contact page.

1. Create a Router Component:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h2>Home Page</h2>;
const About = () => <h2>About Page</h2>;
const Contact = () => <h2>Contact Page</h2>;

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

export default App;

In this example:

• We import the necessary components from react-router-dom: BrowserRouter (renamed to Router), Route, Switch, and Link.

• We create simple Home, About, and Contact components.

• The Router component wraps the entire application.

• We use Link components to create navigation links.

• The Switch component is used to render only the first matching route.

• The Route components define which component to render based on the URL path.

8.4 Navigating Through the App

With this setup, you can now navigate through the home, about, and contact pages using the links. The URL changes, but the page doesn’t reload. React Router handles everything behind the scenes, making the navigation smooth and fast.

8.5 Nested Routes

Sometimes, you need to create routes within routes. React Router makes this easy with nested routes. Let’s add a nested route to our About page.

1. Create a Nested Component:

javascriptCopy codeconst Team = () => <h3>Our Team</h3>;
const History = () => <h3>Our History</h3>;

const About = ({ match }) => (
  <div>
    <h2>About Page</h2>
    <ul>
      <li><Link to={`${match.url}/team`}>Team</Link></li>
      <li><Link to={`${match.url}/history`}>History</Link></li>
    </ul>

    <Switch>
      <Route path={`${match.path}/team`} component={Team} />
      <Route path={`${match.path}/history`} component={History} />
    </Switch>
  </div>
);

In this example:

• We create Team and History components.

• Inside the About component, we add nested links using match.url.

• We define nested routes using match.path.

8.6 Handling 404 Pages

A good user experience includes handling unknown routes gracefully. Let’s add a 404 page to our application.

1. Add a 404 Route:

const NotFound = () => <h2>404 - Page Not Found</h2>;

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

export default App;

In this example:

• We create a NotFound component.

• We add a route without a path at the end of the Switch component to catch all undefined routes and display the 404 page.

And there you have it! You’ve just learned how to set up React Router, create basic and nested routes, and handle 404 pages. Navigation is a crucial part of any web application, and React Router makes it incredibly easy and intuitive.

Happy Routing!