React Router can get you to the right URL.

React is, without a doubt, one of the greatest javascript libraries for developing applications. But when creating a web app with a dynamic link that directs to other pages the only issue that can be bothering is that even though the page shows a different page but on the web URL is still the same as the previous page. So in order to fix this issue React introduce called ReactRouter. It follows the same root of using React which is based on a Javascript library but shrinks the size of React package. What does it mean? It means that it doesn’t use the whole library of React but instead only necessary parts of it. So let see how it Works

First, Let’s install React Router to the current project,

npm i react-router-dom

Now the mainly famous component in Rect Router is Link and Route.

1. <Link>

The link component is somewhat similar to the HTML attribute tag anchor. However unlikely <a> tag where it gives the user to access “href”(is used to specify a target or destination for the ancho element”), <Link> component has “to” props that leads to another direction.

<Link to="/Home">Home</Link>

2.<Route>

How about a user enters a specific URL how can the webserver show that URL page? The route component is the perfect tool for that. Because the way the Route component works is when the current URL matches then it shows the matching component for the user.

<Route path="/about" component={About} />

As a given example shows <Route> uses is propped “path” and if the current URL matches with the path then it direct you to the right component.

Pretty nice right?