Getting started with React Router

What you will know from this article :

1. What is React Router
2. Install and configure React Router
3. Static Routing
4. Dynamic Routing

1. What is React Router : React Router is The Powerful tool to create Single Page Web Application (SPA) . Basically it’s deauty is to manage your file path URL . Like : you have 3 component(home,about,contact) to show according to url Change , like : when your url look like “www.yourwebsite.com/” it have to show your home component ,if the url look like “ www.yourwebsite.com/about” it have to show your about component and if it’s “www.yourwebsite.com/contact” it will show the contact component .
2. Install and configure React Router : Hence react router is so important for your react application , you will not get the tool by default with React , it’s a Third party tool you have install it to your project to get the features .

Here is the guys who had developed it for you : https://reacttraining.com/react-router/web/guides/quick-start

Let’s Install it to our project … let’s install it with any of your exciting project or you can create a new one for learning purpose … I’m not going to create a new one … make your favorite terminal ready to work …

Here is our first Command to install React Router in our project :

if you had gone through there documentation by the link … you will found two options of react router for react web and for react native …. we are going to use it in our react web project so our one is call by “react-router-dom” by them and which one is for React Native that one is called “react-router-native” . so we are going to install “react-router-dom” in our project by NPM so our NPM command will be :

npm install react-router-dom

Run it and have a cuff of coffy . Done ? let’s use it…

As you know we have to import something from the install , yeah we have some module from “react-router-dom” we will import whenever whatever will be needed.

In this case We will import :

import { BrowserRouter, Switch, Route, Link} from ‘react-router-dom’;

1. BrowserRouter => It will enable routing facility to our wrapped components . so I’m going to use it into my App.js and i would love to wrap whole thing by <BrowserRouter> </BrowserRouter> : so that everything will be available for the features ..
2. Link => The Link will create url anchor for our SPA .

Example : <Link to=“/about”>About</Link>

the “to” attribute will know the url path ..

it’s actually will be converted to <a href=“/about”>About</a>

3, 4 . Now we will write those switchable component which will switch to dom based on the url path . So here is the use of the imported “Switch” module … and we didn’t forgot about the “Route” module .. it’s duty to separate components Route based the path url and show the specific one . So it have to contain a attribute call “path” that’s will know the path url when it have to be visible . So It’s Look Like Bellow :

<Route path=”/about”>

<About/>

</Route>

So you got Idea about all module . so let’s wrapped up all thing and show you a practical one …

So see the code carefully . Think about what you do not get ?

The “exact” and the “*” right?

Okay .. the “exact” mean the path url have to be the same it’s used for home page . It’s mean it will not interact with “/something” because might be there will be others url path after the “/” .

And the “*” ? okay .. see I have put the route at the bottom you have to do this too , because the “*” mean everything else .. might be some unknown or wrong path url like 404/not found page..

Okay So What ever it will happen if you don’t know the exact path url but you have to do something with it?

I mean Dynamic route … suppose you have some product with unique key or slug, when the specific one will come one route url path then you will show the specific product .

So what is the Solution?

You have to pass the unique key of the product as parameter of the Route path .

So might be our Link will look like bellow :

<Link to={“/product/”+key}>Link for the dynamic product</Link>

The Route will be Look Like :

<Route path=“/product/:key”>

<ProductDetails>

</Route>

//Note : “:” the qolone mean we are writing a parameter

Okay our those work are done now how will we get the “key” whatever we pass via parameter ?

Don’t worry we have a Hook called “useParams” that know whatever the parameter bringing ..

So we have to import it from react-router-dom into the specific component .

import {useParams} from ‘react-router-dom’;

Okay no more boring code example let’s show you a Screenshot …

Is it hard to understand ?

Yeah… it’s pretty easy thing … but one thing you have to look …

const {key} = useParams()

what it’s mean ? nothing just destructuring parameters from hook .. that’s it , so that we can get the key parameter’s value by the key variable …

So start developing amazing Single page web Applications , Best of luck …