Learn React Router — Getting Started with React Router

What is React Router?

React Router is a routing library that conditionally renders some components to display depending on the route being used in the link. It handles routes in a website using dynamic routing.

For example, we can connect our website’s homepage may be chiragjain.co.in to chiragjain.co.in/contact.

We use the same HTML page to render the different components based on the URL in a single page of websites. While in the case of multipage websites, we get a new page from the server when we navigate.

Getting Started

How to Install React Router?

First, you need to set up your app to use react-router-dom. So to set up your react app, run the below commands.

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

To install React Router, we need to download its package by running the below command in the terminal.

npm install react-router-dom

After installing it, run your react app.

npm start

Now currently, we have only one component in our app, that is, the App component.
We need to create three more components to understand it better.
Create three new files with names — home.js, about.js, and contact.js in “src” folder.

home.js

import React from "react";
function Home() {
    return (
      <div>
        <h2>Home</h2>
      </div>
    );
}
export default Home;

about.js

import React from "react";
function About() {
    return (
      <div>
        <h2>About</h2>
      </div>
    );
}
export default About;

contact.js

import React from "react";
function Contact() {
    return (
      <div>
        <h2>Contact</h2>
      </div>
    );
}
export default Contact;

How to use it?

React router gives us four components, that are, BrowserRouter, Switch, Link, and Route which help us to implement the routing in our website.

Router & Switch Component

While implementing routing, we need to specify two properties in Route Component, that are :

• path : Here we need to specify the path on which we want to redirect the user.
• component : Here we need to specify the component which the user needs to see when he/she comes to that path.

Now open App.js file and import all the three components that we had created previously and the Route component to linking to those components as shown below.

App.js

import React from "react";
import "./styles.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from "./home";
import About from "./about";
import Contact from "./contact";
export default function App() {
  return (
   <Router>
     <div>
       <Switch>
         <Route exact path="/">
           <Home />
         </Route>
         <Route path="/about">
           <About />
         </Route>
         <Route path="/contact">
           <Contact />
         </Route>
      </Switch>
    </div>
  </Router>
  );
}

Note :

• A <Switch> looks through all its children elements and renders the first one whose path matches the current URL. Use an <Switch> any time you have multiple routes, but you want only one of them to render at a time.
• In the first route, we had used the exact path so that our app doesn’t render other components of other routers. For example — ‘/’ will render ‘/about’ and ‘/contact’ URLs too.

Link Component

<Link> create links in your application. Wherever you render a <Link>, an anchor (<a> ) will be rendered in your HTML document.

Add below code in <div> tag above <Switch> tag of App.js

<ul>
  <li>
    <Link to="/">Home</Link>
  </li>
  <li>
    <Link to="/about">About</Link>
  </li>
  <li>
    <Link to="/contact">Contact</Link>
  </li>
</ul>
<hr />

After adding the <Link> component, you will see that your app starts rendering the Home, About, and Contact Components on the screen.

Add 404 Not Found Page

You can use the last <Route> in an <Switch> as a kind of “fallback” route, to know the 404 page not found error.

Let’s create a PageNotFound Component.
Create a new file pagenotfound.js in “src” folder.

pagenotfound.js

import React from "react";
function PageNotFound() {
    return (
      <div>
        <h2>Page Not Found</h2>
      </div>
    );
}
export default PageNotFound;

Now add the last route of the page not found in the Switch Component. Add below code before the closing of Switch Component.

<Route path="*">
  <PageNotFound />
</Route>

Let’s check it now by manually entering the wrong path localhost:3000/faq

There are a few useful things to note about this example:
- A <Switch> renders the first child that matches
- A <Redirect> may be used to redirect old URLs to new ones
- A <Route path=”*”> always matches

URL Parameters

Params are placeholders in the URL that begin with a colon, like the :id param defined in the route in this example. A similar convention is used for matching dynamic segments in other popular web frameworks like Rails and Express.

Let’s create a new file user.js in “src” folder and add the below code to it.

user.js

import React from "react";
import {useParams} from "react-router-dom";
function User() {
    let {id} = useParams();
    return (
      <div>
        <h2>ID : {id}</h2>
      </div>
    );
}
export default User;

Now in App.js file, add this route above PageNotFound Component in Switch Component.

<Route path="/user/:id">
  <User />
</Route>

Now check your app by manually entering a path like “/user/chiragjain”.

Hope you had gained some knowledge about React Router and their practical application.