Setting up React Router

React Router is a popular library for managing routes in a React application. It allows you to define different routes for different pages in your application, and it provides a simple way to navigate between those pages. In this article, we will cover the basics of setting up React Router in a new React application.

Installing React Router

To install React Router, open a terminal and run the following command:

npm install react-router-dom

This will install the latest version of React Router and add it to your project’s dependencies.

Creating a Router

Once React Router is installed, you can start using it in your application. The first step is to create a router that will hold your routes. To do this, import the BrowserRouter component from react-router-dom and wrap your root component with it:

import React from 'react';
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <div>
        {/* Your routes go here */}
      </div>
    </BrowserRouter>
  );
}

Defining Routes

With the router set up, you can start defining your routes. To define a route, import the Route component from react-router-dom and specify the path and component to render for that route:

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

function App() {
  return (
    <BrowserRouter>
      <div>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

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

In this example, we have defined two routes: /home and /about. When the user navigates to one of these routes, the corresponding component will be rendered.

Navigating Between Routes

To navigate between routes, you can use the Link component from react-router-dom. This component works like an anchor tag and allows you to navigate to a different route by clicking a link:

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

function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>

        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

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

In this example, we have added two links to the home and about routes. When the user clicks on one of these links, the router will navigate to the corresponding route and render the corresponding component.

Dynamic Routing

React Router also allows you to define dynamic routes, which are routes that include a placeholder for a variable. For example, consider the following route:

<Route path="/users/:id" component={UserProfile} />

This route defines a placeholder called id, which can be any string. When the user navigates to a route like /users/123, the id placeholder will be set to "123".

To access the value of the placeholder, you can use the useParams hook from react-router-dom:

import { useParams } from 'react-router-dom';

function UserProfile() {
  const { id } = useParams();

  return <h1>User {id}</h1>;
}

In this example, the id variable will be set to the value of the id placeholder in the route.

Nested Routing

You can also nest routes to create a hierarchy of routes within your application. For example, consider the following routes:

<Route path="/users/:id" component={User} />
<Route path="/users/:id/posts" component={UserPosts} />

In this case, the User component will be rendered when the user navigates to a route like /users/123, and the UserPosts component will be rendered when the user navigates to a route like /users/123/posts.

To nest these routes, you can use the Switch component from react-router-dom. This component will render the first matching route that it finds:

import { Switch } from 'react-router-dom';

function User() {
  return (
    <Switch>
      <Route path="/users/:id" component={UserProfile} />
      <Route path="/users/:id/posts" component={UserPosts} />
    </Switch>
  );
}

In this example, the Switch component will render the UserProfile component for a route like /users/123, and it will render the UserPosts component for a route like /users/123/posts.

Conclusion

React Router is a powerful tool for managing routes in a React application. It allows you to define different routes for different pages, and it provides a simple way to navigate between those pages. In this article, we covered the basics of setting up React Router in a new React application. You can find more information on React Router and its features in the documentation.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

npx create-react-app my-app
cd my-app
npm install react-router-dom

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

function App() {
  return (
    <BrowserRouter>
      <div>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

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

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

function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>

        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

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

import React from 'react';
import { BrowserRouter, Route, Link, useParams } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/users/123">User 123</Link>

        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users/:id" component={User} />
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

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

function User() {
  const { id } = useParams();

  return <h1>User {id}</h1>;
}

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

function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/users/123">User 123</Link>
        <Link to="/users/123/posts">User 123 Posts</Link>

        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users/:id" component={User} />
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

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

function User() {
  return (
    <Switch>
      <Route path="/users/:id" component={UserProfile} />
      <Route path="/users/:id/posts" component={UserPosts} />
    </Switch>
  );
}

function UserProfile() {
  const { id } = useParams();

  return <h1>User {id} Profile</h1>;
}

function UserPosts() {
  const { id } = useParams();

  return <h1>User {id} Posts</h1>;
}