React Router in 5 minutes

#react #webdev #javascript #beginners

React Router is the standard routing library for React. “React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. After reading this post you will become a master of react router. So let's get started.

How to use it?

Before using it, you need to install react-router-dom. So open up command line and install it.

npm i react-router-dom

After it's installed, Now we need to import some stuffs.

import { BrowserRouter, Switch, Route } from 'react-router-dom'

After importing, we need to wrap our whole app with browser router or where ever you want to use router, wrap the whole thing with that. Now add this switch element in browser router.

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

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Switch>
          <Route />
        </Switch>
      </BrowserRouter>
    </>
  );
};
export default App;

}

Now we can create routes.

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

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Switch>
          <Route
            path="/"
            exact
            component={() => {
              return (
                <>
                  <h1>Hello I am the home page</h1>
                </>
              );
            }}
          />
        </Switch>
      </BrowserRouter>
    </>
  );
};
export default App;

So as you can see here in this code, I have created a route which is for our home page cause we have specified the path which is '/'. And then, if the path is, '/' then which thing should it render, I have created a component there. You could just create a separate one then import it and then just put it 'component={here}'.

Let's create some more routes.

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

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Switch>
          <Route
            path="/"
            exact
            component={() => {
              return (
                <>
                  <h1>Hello I am the home page</h1>
                </>
              );
            }}
          />
          <Route
            path="/about"
            component={() => {
              return (
                <>
                  <h1>I am from the about page.</h1>
                </>
              );
            }}
          />
          <Route
            path="/blog"
            component={() => {
              return (
                <>
                  <h1>I am from the blog page.</h1>
                </>
              );
            }}
          />
        </Switch>
      </BrowserRouter>
    </>
  );
};
export default App;

Now I have created multiple routes. Now we can only see the home page in the screen. How can we see the other pages? Easy! Just type 'about' after the url of your page then you will be redirected to the about page. So after writing '/about', why it is redirecting us to the about page? Cause we created the route by specifying the path which was 'about'. So when anyone will write this path, he/ she will be redirected to there. So now, it's not a cool stuff yet :(. Now we will see how can we create a awesome nav using react router. And it will be super fast. So let's create a 'Nav' component. :)

import React from "react";
import { Link } from "react-router-dom";

const Nav = () => {
  return (
    <>
      <Link to="/" exact>
        Home
      </Link>
      <Link to="/about" exact>
        About
      </Link>
      <Link to="/blog" exact>
        Blog
      </Link>
    </>
  );
};
export default Nav;

So this one was our nav component. Nothing so much fancy here. I have just imported 'Link' element from react-router-dom. The it takes a prop 'to' which specifies to where it should redirect. Now let's render it under our app component.

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Nav from "./Nav";

const App = () => {
  return (
    <>
      <Nav />
      <BrowserRouter>
        <Switch>
          <Route
            path="/"
            exact
            component={() => {
              return (
                <>
                  <h1>Hello I am the home page</h1>
                </>
              );
            }}
          />
          <Route
            path="/about"
            component={() => {
              return (
                <>
                  <h1>I am from the about page.</h1>
                </>
              );
            }}
          />
          <Route
            path="/blog"
            component={() => {
              return (
                <>
                  <h1>I am from the blog page.</h1>
                </>
              );
            }}
          />
        </Switch>
      </BrowserRouter>
    </>
  );
};
export default App;

So now I am rendering the Nav component in the app.js But it's showing an error why!!! Haha cause we are using Link element in Nav so we have to put the nav under the BrowserRouter cause we are putting the path's of this router in our Nav. After putting it under BrowserRouter, Then it should work just fine. :)

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Nav from "./Nav";

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Nav />
        <Switch>
          <Route
            path="/"
            exact
            component={() => {
              return (
                <>
                  <h1>Hello I am the home page</h1>
                </>
              );
            }}
          />
          <Route
            path="/about"
            component={() => {
              return (
                <>
                  <h1>I am from the about page.</h1>
                </>
              );
            }}
          />
          <Route
            path="/blog"
            component={() => {
              return (
                <>
                  <h1>I am from the blog page.</h1>
                </>
              );
            }}
          />
        </Switch>
      </BrowserRouter>
    </>
  );
};
export default App;

Here we go, now we are getting the output just perfectly :). But a last thing how do we know in which page are we in now? So in this case, we should use NavLink instead of Link then we will have another extra prop named, 'activeClassName'. Let's make it :).

import React from "react";
import { NavLink } from "react-router-dom";

const Nav = () => {
  return (
    <>
      <NavLink activeClassName="active" to="/" exact>
        Home
      </NavLink>
      <NavLink activeClassName="active" to="/about" exact>
        About
      </NavLink>
      <NavLink activeClassName="active" to="/blog" exact>
        Blog
      </NavLink>
    </>
  );
};
export default Nav;

I have put a active class. Which will be styled when the page is opened/ Loaded. So style it in your way how ever you want.

In routing, we are using component prop for rendering. But we have another prop which is render. So What it does? It will create the whole component again. After the page loads.

So that's all about react router hope you enjoyed that. Thanks for reading this article. If you have any issue with my post, please let me know. And make sure you follow me to recieve all the informational posts just like that one.