Routing in React JS

Routing is an important role in any front end single page application. If you want to serve several components based on given route then routing will comes in picture.

Today we will show you how to implement routing in React JS application. Before we start, You have to know about the basic of react component We will use react router library for same.

Routing in React JS, Basic - React Router, Getting started with React Router, A Simple React Router Tutorial, Beginner's Guide to React Router, Example of routing React Apps.

https://youtu.be/-qPK85w_mag

The complete guide of Routing in ReactJS

• Routing in React JS (You are here...)
• URL Parameters with React Router
• Nested Routes in React JS
• Multiple parameters with React Router
• What’s new in React Router version 6

Way to implement routing in React JS

1. What is react router?
2. Install the react router
3. Implement routing with example
4. Output

1. What is react router?

React router is nothing but it’s standard routing library built on top of react library. React router library is used to implement routing in react application.

2. Install the react router

You have to create the startup react application for that you may use the create-react-app. Checkout the article below for more information.

How to create react application

To install the React Router, You have to run the following command. By the use of that we will download the react-router-dom package.

npm i react-router-dom

3. Implement routing with example

There will be a single component (App.js) inside the demo application currently created by us. That one we will consider as home page and now we will going to create another components for routing.

Contact.js

import React, { Component } from 'react';

class Contact extends Component {
  render() {
    return <div>
      <h4>Contact</h4>
      <p>This is Contact page.</p>
    </div>
  }
}

export default Contact;

About.js

import React, { Component } from 'react';

class About extends Component {
  render() {
    return <div>
      <h4>About</h4>
      <p>This is About page.</p>
    </div>
  }
}

export default About;

App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return <div>
      <h4>Home</h4>
      <p>This is Home page.</p>
    </div>
  }
}

export default App;

React router gives us four main components (BrowserRouter, Switch, Route, Link) which help us to implement the routing in react application.

BrowserRouter is uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.

Switch is used to render the first child that matches the location.

Route is responsible to render component UI when a location matches the route’s path.

Link is used to manage the navigation.

Now we need to update the index.js file with routing package.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'
import App from './App';
import About from './About';
import Contact from './Contact';

const routing = (
  <BrowserRouter>
    <div>
      <h3>Clue Mediator</h3>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </div>
  </BrowserRouter>
)

ReactDOM.render(routing, document.getElementById('root'));

4. Output

Output - Routing in React JS - Clue Mediator

Demo & Source Code

Github Repository StackBlitz Project