The Project | About Us | Contribute | Donations | License

HOME

React Router is a powerful library that enables dynamic routing in a React application. It allows you to create single-page applications with navigation and dynamic content without the need to reload the entire page. In this lesson, we will cover the basics of React Router, including its installation, core concepts, and a simple example to get you started.

Key Concepts

Routing: The process of navigating between different views or components in a web application.
Single-Page Application (SPA): A web application that loads a single HTML page and dynamically updates the content as the user interacts with the app.
React Router: A library that provides routing capabilities for React applications.

Installation

To use React Router in your project, 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

Basic Usage

Setting Up Routes

To set up routing in a React application, you need to wrap your application with the BrowserRouter component and define your routes using the Route component.

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

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

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

ReactDOM.render(<App />, document.getElementById('root'));

Explanation

BrowserRouter: This component is a router implementation that uses the HTML5 history API to keep your UI in sync with the URL.
Route: This component is used to define a route in your application. It takes a path prop to specify the URL path and a component prop to specify the component to render.
Switch: This component is used to group multiple Route components. It renders the first child Route that matches the current URL.

Example

Let's create a simple React application with three pages: Home, About, and Contact.

Home Component:

const Home = () => {
  return (
    <div>
      <h2>Home Page</h2>
      <p>Welcome to the Home Page!</p>
    </div>
  );
};

About Component:

const About = () => {
  return (
    <div>
      <h2>About Page</h2>
      <p>This is the About Page.</p>
    </div>
  );
};

Contact Component:

const Contact = () => {
  return (
    <div>
      <h2>Contact Page</h2>
      <p>Get in touch with us!</p>
    </div>
  );
};

App Component:

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

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

export default App;

Running the Application

To run the application, ensure you have a development server set up (e.g., using Create React App). Start the server and navigate to the different routes to see the components rendered based on the URL.

npm start

Summary

In this lesson, we introduced React Router and its basic usage. We covered the installation process, setting up routes using BrowserRouter, Route, and Switch components, and created a simple example with three pages. Understanding these basics will help you build more complex routing structures in your React applications.

In the next lesson, we will dive deeper into setting up React Router, including nested routes and programmatic navigation.

Introduction to React Router

Key Concepts

Installation

Basic Usage

Setting Up Routes

Explanation

Example

Running the Application

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