React Router - A Beginner Guide

What is React Router?

the basic explanation for this will be-
"React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL."

So above definition makes it clear that it makes the browser URL in sync with the your component which is being displayed or your view.

Do we really need React Router

As for a plain HTML , CSS and JS application you may have checked the Browser URL for your site or app while navigating through your html pages.

www.dummysite.com/index.html or www.dummysite.com/login.html

Now you see how your url is followed by .html but in react while navigating through your views beginners dont bother with updating or syncing with URL . That's where Routing comes in handy.

Starting with React-Router

So lets start with adding React router to your React application.
For your NPM , you can use

npm i react-router-dom

Now as it is installed as dependency , you are good to go to use it.

Start with importing it to your component-

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

A Go-Through Example with Basic Routing-

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}
function Users() {
  return <h2>Users</h2>;
}

Lets go through all one-by-one

• BrowserRouter - BrowserRouter is a router implementation that uses the HTML5 history API(pushState, replaceState and the popstate event) to keep your UI in sync with the URL. It is the parent component that is used to store all of the other components.
• Route - Route is the conditionally shown component that renders some UI when its path matches the current URL.
• Link - Link component is used to create links to different routes and implement navigation around the application. It works like HTML anchor tag.
• Switch - Switch component is used to render only the first route that matches the location rather than rendering all matching routes. Although there is no defying functionality of SWITCH tag in our application because none of the LINK paths are ever going to coincide. But let’s say we have a route (Note that there is no EXACT in here), then all the Route tags are going to be processed which start with ‘/’ (all Routes start with /). This is where we need SWITCH statement to process only one of the statements.

Let us now try to understand the props associated with the Route component.

• exact: It is used to match the exact value with the URL. For Eg., exact path=’/about’ will only render the component if it exactly matches the path but if we remove exact from the syntax, then UI will still be rendered even if the strucute is like /about/10.

• path: Path specifies a pathname we assign to our component.

• component: It refers to the component which will render on matching the path.

Note: By default, routes are inclusive which means more than one Route component can match the URL path and render at the same time. If we want to render a single component, we need to use switch.

I think these concepts are useable and easy to understand for beginner. But do practice and experiment with these for better understanding.

Do share your feedback if this blog proves useful to you.