How To Handle Routing In React Using BrowserRouter

This tutorial help to add routing in reactjs application. React Router is a standard library for routing in React. It enables navigation between views from different components in a React application.

I have already shared How To Do theming layout into reactjs application. I am just extending that tutorial to add routing within the layout.

React Router

Browser Router or React Router API  is a most popular library  for routing in react to navigate among different components in a React Application. Let’s the browser URL to be modified, and keeps the UI up to date with the URL.

React Router Components

The main components of React Router are:

• BrowserRouter: The BrowserRouter is a router implementation that uses the HTML5 history API (pushstate, replacestate, and popstate events) to keep your UI in sync with the URL. It is the parent component used to store all other components.
• Switch: A switch component looks through all of its child routes and it displays the first one whose path matches the current URL.
• Route: A route is a conditionally shown component that provides UI when its path matches the current URL.
• Links: The Links component creates links for different routes and implements navigation around the application. It works as an HTML anchor tag.

Checkout Other tutorials:

• React Layout Using Material Design
• React File Upload In 5 Minute
• Autocomplete Example Using React
• React’s New Context API With Example
• React Helmet with ReactJs

React Router in ReactJS Application

Let’s start to create a react app and pages for navigation using react-router-dom.

We will use BrowserRouter, Switch, Route and Link Reactjs module for routing, The routing help to navigate the page using an anchor tag or menu link.

The layout partial files are header, sidebar and footer. The partial files will remain constant but layout content will change on demand (when user will click in menu link).

We will create two pages in this react application, One is contact-us page and the other is about page for application routing, So whenever user will click or route to /about and /contact page, We will render that page content into layout main file.

Set up the Router in Your React Application:

First, We’ll install react-router-dom package in react application via npm. The following command to install React Router:

npm install --save react-router-dom

We will use import all required modules into the main layout file:

import { 
BrowserRouter as Router, 
Switch, 
Route, 
Link } from "react-router-dom";

Create Contact Page in ReactJS Application

We will add below code into about.ts file. This file will have only some constant message.

import React, {Component} from 'react';
class About extends Component {
    render(){
        return (
               About page); 
      } }

Create Contact Page in ReactJS Application

We will create contact.ts file and add the below code to this file.

import React, {Component} from 'react';
class Contact extends Component {
    render(){
        return (
Contact page
); } }

Now import the earlier created about and contact page into the above file(layout.ts).

import Contact from './contact'
import About from './about'

We will Add the Router and Switch module to navigate the page using the link:

<Switch>
    <Route exact path="/">
      <Home />
    </Route>
    <Route path="/about">
      <About />
    </Route>
    <Route path="/contact">
      <Contact />
    </Route>
  </Switch>

 <Switch> will start looking for a matching <Route>. <Route path="/about"/> will match and <Switch> will stop looking for matches and render <About>. If the URL is  /contact then <Contact>.

You can add menu links into the header or other files as well, but make sure you have imported all modules and pages.