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 create-react-app blog
npm init react-app blog
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:
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
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.
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:
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 i react-router-dom
Having installed the package, let’s come to the App.js component and import some components from
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.
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.
Hope it can help you.