Setting up routes

Setting up routes in your React application is an important step in creating a single-page application with multiple views. React Router provides a simple and flexible way to set up routes in your application, allowing you to easily navigate between different views and components.

Installing React Router

Before we get started, we need to install React Router. You can install it using npm:

npm install react-router-dom

Creating a Basic Route

Let’s start by creating a basic route in our application. We’ll create a component called Home and set it up as the default route for our application:

jsx

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

function Home() {
  return <h1>Welcome to the Home page!</h1>;
}

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
      </Switch>
    </Router>
  );
}

export default App;

In this example, we’ve imported the BrowserRouter, Route, and Switch components from the react-router-dom library. We’ve created a Home component that will be displayed when the user navigates to the root URL (/). We’ve then set up a route that maps the root URL (/) to the Home component using the Route component.

The exact prop on the Route component tells React Router to only match the exact path (/) and not any other paths that start with /.

Creating Additional Routes

Let’s add some additional routes to our application. We’ll create a component called About and set it up as a secondary route in our application:

jsx

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

function Home() {
  return (
    <div>
      <h1>Welcome to the Home page!</h1>
      <Link to="/about">About</Link>
    </div>
  );
}

function About() {
  return <h1>About Us</h1>;
}

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

export default App;

In this example, we’ve created a Link component in the Home component that navigates to the /about URL. We’ve also created an About component and set it up as a secondary route in our application using the Route component.

The order of the Route components is important. React Router will match the first route that matches the current URL. In this example, the exact route (/) must come before the secondary route (/about) to ensure that the Home component is displayed as the default route.

Using Route Parameters

Route parameters allow you to pass dynamic values as part of the URL. Let’s create a component called User that takes a userId parameter as part of the URL:

jsx

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

function Home() {
  return (
    <div>
      <h1>Welcome to the Home page!</h1>
      <Link to="/about">About</Link>
      <Link to="/users/1">User 1</Link>
      <Link to="/users/2">User 2</Link>
    </div>
  );
}

function About() {
  return <h1>About Us</h1>;
}

function User