What is React Router ?

React Router is a library. Its useful to wrap links in components. In a nutshell, React Router is “Multipage Functionality in Single Page Application”. It’s a client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates

React Router gives the feel of Desktop app so that you’re switching between pages without talking to the server thus the page doesn’t reload. So switching to different pages without Reloading or Refreshing the page.

To Understand this concept, a basic example is given below -

To install this library, enter the below command in terminal ⤵️

npm install react-router-dom

Important import statement in App.js ⤵️

import {BrowserRouter as Router, Switch, Route}   from “react-router-dom"

BrowserRouter as Router is responsible for Redirecting page (Alias is used as Router) above.

function App() {
return (
<Router>
<div className="app">
<Switch>
</Switch>
</div>
</Router>
);
}

In <switch>, to create new pages Route path is Used⤵️

<Switch>
<Route path="/checkout">
<h1>Checkout page</h1>
</Route>
<Route path="/Login">
<h1>Login page</h1>
</Route>
<Route path="/">
<h1>Home page</h1>
</Route>
</Switch>

As you can see, the last Route is the Default one “Main page” so if user puts wrong name in Url it automatically Redirects to Main page.

Think of this way Router is like a parent which wraps the whole app so that Route(children) inside the Router can handle functionality of redirecting to pages.

It kind of works as “Higher Order Component”.

Link

Link is part of react router, its basically used in a component. Example if we want to redirect to home page after clicking on a image.

Surround <Link to=“/login”><img></img></Link> to that image tag.

And pass (to = “/page-name”) , in case of default page use only “/”.

Now you may think, what is the difference between href and Link, Well href causes page refresh whereas Link is more about SPA Transition(Single Page Application).