The Project | About Us | Contribute | Donations | License

HOME

In this section, we will learn how to set up React Router in a React application. React Router is a powerful library that allows you to handle routing in a React application, enabling navigation between different components and views.

Objectives

Understand the basics of React Router.
Install React Router in a React application.
Set up basic routing.
Create and navigate between different routes.

Prerequisites

Basic understanding of React components.
Familiarity with JavaScript ES6 syntax.

Step-by-Step Guide

Understanding React Router

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

Installing React Router

To use React Router, you need to install the react-router-dom package. You can do this using npm or yarn.

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

Setting Up Basic Routing

Once you have installed react-router-dom, you can set up basic routing in your application.

3.1. Create a Basic React Application

If you don't already have a React application, you can create one using Create React App.

npx create-react-app my-app
cd my-app

3.2. Create Components for Routing

Create a few simple components that we will navigate between.

// src/components/Home.js
import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

// src/components/About.js
import React from 'react';

const About = () => {
  return <h2>About Page</h2>;
};

export default About;

// src/components/Contact.js
import React from 'react';

const Contact = () => {
  return <h2>Contact Page</h2>;
};

export default Contact;

3.3. Set Up the Router

Now, set up the router in your main application file.

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => {
  return (
    <Router>
      <div>
        <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>
      </div>
    </Router>
  );
};

export default App;

Explanation of Code

BrowserRouter: A router that uses the HTML5 history API to keep your UI in sync with the URL.
Route: A component that renders some UI when its path matches the current URL.
Switch: Renders the first child <Route> or <Redirect> that matches the location.
Link: A component that allows navigation to different routes.

Running the Application

To see the routing in action, start your React application.

npm start

Open your browser and navigate to http://localhost:3000. You should see the Home page. Use the navigation links to switch between the Home, About, and Contact pages.

Practical Exercise

Exercise 1: Add a New Route

Create a new component called Services.
Add a new route for the Services component.
Add a navigation link for the Services page.

Solution

// src/components/Services.js
import React from 'react';

const Services = () => {
  return <h2>Services Page</h2>;
};

export default Services;

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Services from './components/Services';

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

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

export default App;

Summary

In this section, we learned how to set up React Router in a React application. We covered the installation of react-router-dom, setting up basic routing, and creating and navigating between different routes. We also provided a practical exercise to reinforce the learned concepts.

In the next section, we will explore nested routes and how to handle more complex routing scenarios.

Setting Up React Router

Objectives

Prerequisites

Step-by-Step Guide

Understanding React Router

Installing React Router

Setting Up Basic Routing

3.1. Create a Basic React Application

3.2. Create Components for Routing

3.3. Set Up the Router

Explanation of Code

Running the Application

Practical Exercise

Exercise 1: Add a New Route

Solution

Summary

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application