React Router in 3 mins

React Router in 3 mins

Day 7 of 100 days of MERN Development

Let's build Navbar

Using ECMAScript6 Arrow Functions, we can write React-based Components instead of writing classes. A function

import React from 'react';

function Navbar () {
    return(<div></div>);
}

export default Navbar;

is stored in global space as soon as code is initiated by Javascript Engine for hoisting whereas Arrow Function is declared when they are called.

import React from 'react';

const Navbar = () => {
    return(<div></div>);
}

export default Navbar;

To start with the Router we have to install the library as follows:

npm install react-router-dom

7_image_1.png Source: Net Ninja Youtube Video

The typical website that doesn't use a Router is whenever we click on Contact Us page and we are on Home Page, it sends to the server and returns it HTML page of Contact Us. This increases traffic on the server more.

When Router gets added

7_image_2.png Source: Net Ninja Youtube Video

Whereas when the initial request is sent to react server it returns a js bundle that has all static code compiled in it. Whenever we click on Contact Us page Router handles the changes that are to be made on DOM.

To wrap all the Components in the Router in App.js

it has to be in

import {BrowserRouter as Router} from 'react-router-dom';
import {Navbar} from 'components/Navbar';
{/* Navbar file yet to be made... */}

const App = () => {
    return (<Router>
    </Router>);
}

export default App;

Let's say we want Navbar fixed in our website then we write it outside Switch and include another component that has to be switched whenever they will be clicked. Every component in the router can be included in Route.

import {Router} from 'react-router-dom';
import {Navbar} from 'components/Navbar';
import {LandingPage} from 'components/LandingPage';
import {ImageDetail} from 'components/ImageDetail';
{/* Navbar file yet to be made... */}

const App = () => {
    return (<Router>
        <Navbar />
        <Switch>
        <Route exact path='/'><Landing Page /></Route>
        <Route path='/image/:id component={ImageDetail} />
        </Switch>
    </Router>);
}


export default App;
  1. One of the ways to write to Route is to write Component between Route tags.
  2. Component can be also given as a variable to component of Route. : denotes id will be passed which can be fetched at params at the particular page. This means that it will be used for applications like http://localhost:3000/image/zxcvbnm.

In traditional websites we use to change page using href tag as follows:

<a href="contactus.html">Contact Us</a>

These are to be replaced with the Link tag

Navbar.js

import React from 'react';
import {Link} from ;react-router-dom';
{/* These are returning <div></div> ... */}
import {AboutUs} from './AboutUs';
import {ContactUs} from './ContactUs';

const StyledLink = styled(Link) `
  text-decoration: none;
  color : #ffffff;
  &:focus, &:visited, &:link {
      text-decoration: none;
`;

const Navbar = () => {
    return(<nav>
        <ul>
            <li><StyledLink to={AboutUs} /></li>
            <li><StyledLink to={ContactUs} /></li>
        </ul>
     </nav>);
}

StyledLink removes purple color if focus on Route or we have visited Route once, color can be set as a preference.

To summarize we have learned

  1. BrowserRouter aka Router
  2. Switch
  3. Route
  4. Link

In the upcoming blog, we will learn about <ThemeProvider> of Material UI, until then stay connected.