React Router in 5 minutes

React Router in 5 minutes:

 

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 (
    
      
        
          
        
      
    
  );
};
export default App;

}

Now we can create routes.

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

const App = () => {
  return (
    
      
        
           {
              return (
                
                  

Hello I am the home page

); }} /> ); }; 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 (
    
      
        
           {
              return (
                
                  

Hello I am the home page

); }} /> { return (

I am from the about page.

); }} /> { return (

I am from the blog page.

); }} /> ); }; 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 (
    
      
        Home
      
      
        About
      
      
        Blog
      
    
  );
};
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 (
    
      
      
        
           {
              return (
                
                  

Hello I am the home page

); }} /> { return (

I am from the about page.

); }} /> { return (

I am from the blog page.

); }} /> ); }; 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 (
    
      
        
        
           {
              return (
                
                  

Hello I am the home page

); }} /> { return (

I am from the about page.

); }} /> { return (

I am from the blog page.

); }} /> ); }; 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 { Link } from "react-router-dom";

const Nav = () => {
  return (
    
      
        Home
      
      
        About
      
      
        Blog
      
    
  );
};
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.

from Tumblr https://generouspiratequeen.tumblr.com/post/642312117806039040

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s