DEV Community

loading...
Cover image for React Router in 5 minutes

React Router in 5 minutes

ratuloss profile image Ratul Updated on ・4 min read

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
Enter fullscreen mode Exit fullscreen mode

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

import { BrowserRouter, Switch, Route } from 'react-router-dom'
Enter fullscreen mode Exit fullscreen mode

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;

}
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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.

:)

Discussion (8)

pic
Editor guide
Collapse
atulcodex profile image
Atul Prajapati

I think you are learning to react from Stephen Grider, Right?

Collapse
ratuloss profile image
Collapse
atulcodex profile image
Collapse
lyrod profile image
Lyrod

Only NavLink has activeClassName prop, right?

Collapse
ratuloss profile image
Ratul Author

Yes every NavLink has this active class

Collapse
myogeshchavan97 profile image
Yogesh Chavan

Really explained it well. If someone wants to learn more about React Router check out my FREE React Router course here

Collapse
enikindness profile image
Kind

Thanks man, this definitely helped❤️

Collapse
andrewbrown profile image
Andrew Brown 🇨🇦

Thank you for this concise tutorial.