Complete Guide Of React Routing Using React Router DOM

Hello devs, in this brand new tutorial, i am going discuss about react router dom with example. I will explain step by step from scratch that how we can setup react router dom to routing our component path in react js application.

In this react router dom example you will learn how to create a basic react app. You can say that we are going to create react js sample project step by step with react router dom. In this react js router tutorial, I will give you a brief example and overview of React Router DOM. To manage the react routes, i will use the React Router DOM.

In this example, every time when we will navigate to one component to another component, we can set the route for it. For managing routing, i will use React Router DOM.

Step 1: Download react app

Before getting started with React Router in a web app, you’ll need a React web app. First, we need to install create-react-app and make a new project with it. To create a new app, you may choose one of the following methods:

npx

npx create-react-app blog

npm

npm init react-app blog

yarn

yarn create react-app blog

After ruinning above command it will create a directory called blog inside the current folder. Inside that directory, it will generate the initial project structure like that:

Initial App

blog
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

Now start you application by running the below command

npm start

Step 2: Install bootstarp for navbar

In this react router tutorial, i will use bootstrap to create bootstrap nav bar. So run below command to install.

npm i bootstrap

In this step, you need to import bootstrap inside the index.js file. It will be the global, so we can use it in every component.

src/index.js

Step 3: Create React Component

As we are going to create react router dom example, so we need some component to traverse them. To create the navigation and the React Router, create the following components one by one. So create some react component like below.

src
 |___ components
        |__ Header.js
        |__ Home.js
        |__ About.js
        |__ Privacy.js 
        |__ Footer.js 

And update all the component like below:

src/components/Header.js

src/components/Home.js

src/components/About.js

src/components/Privacy.js

src/components/Footer.js

Step 4: Render Compoent from App

Firstly, we need to import the Header component only inside the App component. So that it can be rendered to display the result:

Now visit the below url by running npm start , you will see the output like that:

Step 5: Install React Router

You can install React Router from the public npm registry with either npm or yarn. 

npm i react-router-dom

Having installed the package, let’s come to the App.js component and import some components from react-router-dom.

src/App.js

Step 6: Use Link from React Router Dom

To create any clickable link like anchor tag, you will be having the < Link > < / Link > component in React JS. Firstly, navigate to the Header.js file and import the Link component.

src/components/Header.js

Now if you click any link in your navigation bar, you will see like that:

After clicking Home page

After clicking About page

After clicking privacy page

One more thing is that we have the another component in React that is < NavLink >. Let’s see the usage. You use NavLink component in react for active link.

src/components/Header.js

Read also: React Redux Complete Setup Example with Api Call

Hope it can help you.