Routing in React JS with example

Routing in React JS with example

In this chapter, you will learn about routing in React JS with example. For routing your application you can use the react-router to implement the routing.

What is routing in the application?
As we all know the web application may have more than one page, for example, an e-commerce application may have the user login page, product catalogue page, checkout page and payment page and much more. As we know the React JS is been used for building the single page application, single page application is where we use only one index.html file. When visitors navigate to the different links, the react re-renders the related components.

What does react-router do?
The react-router package has some methods which help in parsing the navigated paths and reads the configuration and returns the related component to the configured route link.

Let’s install the react-router by running the below command
npm install –save react-router react-router-dom

Step 1:
Create the file src/components/manager/Manager.js if you have it already paste the below code snippet

import React from "react";
import './Manager.css'
import {withRouter} from 'react-router-dom'
const manager = (props) => {
  return (
    <div>
        <h2>Page: Home,</h2>
        <h2>This is your home page</h2>
    </div>
  );
};

export default withRouter(manager);

Step 2:
Create the file src/components/manager/Employee.js if you have it already paste the below code snippet

import React from "react";
import {withRouter} from 'react-router-dom'
const profile = (props) => {
  return (
    <div>
        <h2>Page: Profile</h2>
        <h2>This is your profile page</h2>
    </div>
  );
};

export default withRouter(profile);

Step 3:
Create the file src/App.js if you have it already paste the below code snippet

import React, { Component } from 'react';
import './App.css';
import Manager from './components/manager/Manager';
import Profile from './components/manager/Profile';
import Container from './components/hoc/Container';
import axios from 'axios';
import { BrowserRouter, Route, NavLink } from 'react-router-dom'
class App extends Component {
  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.state = {
      isManagerLoggedin: false,
      employee: [
        { name: 'Stark', empId: '123' },
        { name: 'John', empId: '124' },
        { name: 'Mickel', empId: '125' },
        { name: 'Clark', empId: '126' }
      ]
    };
  }

  componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/users').then(response => {
      console.log(response.data);
      this.setState({
        employee: response.data
      });
    });
  }

  login = e => {
    this.setState({ isManagerLoggedin: true });
  };

  logout = e => {
    this.setState({ isManagerLoggedin: false });
  };

  render() {
    return (
      <BrowserRouter>
        <Container divClassName='App'>
          <h1>Welcome to react JS tutorial</h1>
          <header>
            <nav>
              <ul className='header-menu'>
                <li><NavLink to='/' exact>Home</NavLink></li>
                <li><NavLink to={{
                  pathname: '/profile'
                }}>Profile</NavLink></li>
              </ul>
            </nav>
            <Route path='/' exact component={Manager} ></Route>
            <Route path='/profile' exact component={Profile}></Route>
          </header>
        </Container>
      </BrowserRouter>
    );
  }
}

export default App;

Step 4:
Create the file src/App.css if you have it already paste the below code snippet

.App {
  text-align: center;
}

button {
  width: 200px;
    padding: 14px;
    font-size: 18px;
    border: 5px solid blue;
    border-radius: 19px;
}
.header-menu li {
  display: inline-block;
  margin: 5px;
  padding: 5px;
}
.header-menu li a {
  text-decoration: none;
  color: black;
}
.header-menu li a:hover {
  color: blue;
}

Now hit the URL http://localhost:3000/, you should see the working routing