Coders Packet

How to use React-Router in ReactJs - Learn by making a Project

By Harsh Tanwar

Hello, Guys Welcome back! In this tutorial, we're going to learn the basics of routing in React using React-Router by making a completely working React application.

What is React-Router?

React-Router is used to make SPAs -> single-page applications. Many modern websites are made up of a single page only, they look like multiple pages because different components render like separate pages. At its core, what React Router does is conditionally render certain components to display depending on the route being used in the URL (/ for the home page, /green for the green page, etc.).

What we will make?

Our Demo App

How do I use it?

To get started with React Router in a web app, you’ll need a React web app.

First, let's use

create-react-app

and make a new project with it.

 

Now, to use React Router, you first have to install it using NPM-

npm install react-router-dom

 

 Now, we will import BrowserRouter from the react-router-dom package into our index.js file as everything that gets rendered will need to go inside the element, so wrap them around your App first.

 index.js
import { BrowserRouter as Router } from 'react-router-dom';

 

Now, in our App.js we will import Switch from react-router-dom as it ensures that only one component is rendered at a time. If we don't use Switch, we can default to the Error component, which we're going to write later.

App.js
 

 

It's now time to import and use our tags. These are the links between the components and should be placed inside the tags. To tell the tags which component to load, simply add a path attribute and the component's name to load with the component attribute.

Homepage URLs are followed by "/" and we need to use exact to the Route tag as all other URLs also contain "/", so if we don't tell the app that it just needs to look for "/", it loads all the pages having "/" on the homepage and its a very annoying bug to deal with.

App.js

 

Now, let's import the page components into the app. (tip: To keep your code clean make a different folder for pages)

App.js
import Home from "./Pages/Home";
import Blue from "./Pages/Blue";
import Green from "./Pages/Green";
import Red from "./Pages/Red";

 

To make our website more professional we can add an error page too. If the user types an incorrect URL we will go to the error page. It's just like a normal but, with no path.

<Route component={Error} />

Till now, our site is only navigable by typing URLs. To add clickable links to our site, we use the element which is imported from react-router-dom. Now, let's add links to our Home page.

Home.js

 

Now, Our site has clickable links which will help us to navigate around our single-page app.

Output - 

Similarly, we can add links to our other page components.

Blue.js

Output - 

 

Green.js

Output - 

 

Red.js

Output -

That's it! Our app is ready.

The Complete code for this app can be found on my Github.

 

Conclusion 

We created a full single-page React application that can navigate to different pages.

Download project

Reviews Report

Submitted by Harsh Tanwar (harshtanwar)

Download packets of source code on Coders Packet