YouTube Icon

ReactJS Routing Tutorial

ReactJS Routing Tutorial

ReactJS Router has been broken into three bundles: react router, react router dom, and react router native.

You ought to never need to introduce react router straight forwardly. That bundle gives the center steering parts and capacities for React Router applications. The other two give condition particular (program and react native) segments, yet they both additionally re-trade all of react router’s fares.

We are building a site (something that will be kept running in programs), so we will introduce react router dom.

sudo npm install —? save react-router-dom

Configure the .babelrc file in the root of the project.

sudo touch .babelrc //Create a file

sudo nano .babelrc

Add the following code in .babelrc file

   “presets”: [“es2015”, “react”]

Also Read:- How the Internet of Things relates to Artificial Intelligence

Create a file as index.html in a root directory and the following code -

sudo touch index.html //Create a file

sudo nano index.html
<!DOCTYPE html>
<html lang = "en">   
      <meta charset = "UTF-8">
      <title>React Router Tutorial</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="css/bootstrap.min.css">
	  <script src="js/jquery.min.js"></script>
	  <script src="js/bootstrap.min.js"></script>
      <div id = "app"></div>
      <script type = "text/javascript" src = "index.js"></script>

To configure webpack.config.js file, add the following code in webpack.config.js

var config = {
   entry: './main.js',
   output: {
      filename: 'index.js',
   devServer: {
      inline: true,
      port: 8545  
   module: {
      loaders: [
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
module.exports = config;


When beginning another undertaking, you have to figure out which sort of router to utilize. For program based undertakings, there are <BrowserRouter> and <HashRouter> parts. The <BrowserRouter> ought to be utilized when you have a server that will deal with dynamic solicitations (knows how to react to any conceivable URI), while the <HashRouter> ought to be utilized for static sites (where the server can just react to demands for documents that it thinks about).

What you pick in 2018 : ReactJS vs AngularJS vs VueJS

Generally it is desirable over utilize a <BrowserRouter>, yet in the event that your site will be facilitated on a server that lone serves static documents, at that point the <HashRouter> is a decent arrangement.

Router segments just hope to get a solitary kid component. To work inside this constraint, it is valuable to make a <App> segment that renders whatever is left of your application. Isolating your application from the switch is likewise helpful for server rendering since you can re-utilize the <App> on the server while changing the switch to a <BrowserRouter>.

To configure Main.js file, add the following code in Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('app'));

To configure App.js file, add the following code in App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './Home';
import login from './login';

class App extends Component {
   render() {
      return (
            <div className="container-fluid">
               <h2 className="text-center">Welcome to React Router Tutorial</h2>
               <nav className="navbar navbar-inverse">
                 <ul className="nav navbar-nav">
                   <li><Link to={'/'}>Home</Link></li>
                  <li><Link to={'/login'}>Login</Link></li>
               <hr />
                  <Route exact path='/' component={Home} />
                  <Route exact path='/login' component={login} />
export default App;


The <Route> segment is the principle building square of React Router. Anyplace that you need to just render content in light of the area’s pathname, you should utilize a <Route> component.

Also Read:- What you pick in 2018 : ReactJS vs AngularJS vs VueJS


A <Route> expects a way prop, which is a string that portrays the pathname that the course matches?—?for illustration, <Route path=’/program’/> should coordinate a pathname that starts with/list. At the point when the present area’s pathname is coordinated by the way, the course will render a React component. At the point when the way does not coordinate, the course won’t render anything.

Uploading files with ReactJS and NodeJS

Matching paths

React Router utilizes the way to-regexp bundle to decide whether a course component’s way prop coordinates the present area. It incorporates the way string into a normal articulation, which will be coordinated against the area’s pathname. way strings have further developed designing choices than will be secured here. You can read about them in the way to-regexp documentation.

Create Components

To configure Home.js file, add the following code in Home.js

import React, { Component } from 'react';

class Home extends Component {
   render() {
      return (
            <div className="jumbotron">
			  <div className="container text-center">
			    <h1>My Home</h1>      
export default Home;

To configure Login.js file, add the following code in Login.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Login extends Component {
   render() {
      return (
            <h2 className="text-center">Login</h2>
             <form action="">
			  <div class="form-group">
			    <label for="email">Email address:</label>
			    <input type="email" class="form-control" id="email"/>
			  <div class="form-group">
			    <label for="pwd">Password:</label>
			    <input type="password" class="form-control" id="pwd"/>
			  <button type="submit" class="btn btn-default">Submit</button>
export default Login;


Every router makes a history question, which it uses to monitor the current location and re-render the site at whatever point that progressions. Alternate segments gave by React Router depend on having that history protest accessible through React’s unique situation, so they should be rendered as relatives of a router part. A React Router segment that does not have a router as one of its progenitors will neglect to work.

Also Read:- List of Top Mobile Apps Develop In React Native

Connect history api fallback

Single Page Applications (SPA) commonly just use one record document that is open by internet browsers: typically index.html. Route in the application is then regularly dealt with utilizing JavaScript with the assistance of the HTML5 History API. This outcomes in issues when the client hits the invigorate catch or is straightforwardly getting to a page other than the greeting page, e.g. /help or/help/online as the web server sidesteps the record document to find the record at this area. As your application is a SPA, the web server will come up short endeavoring to recover the document and restore a 404?—?Not Found message to the client.

This tiny middleware addresses some of the issues. Specifically, it will change the requested location to the index you specify (default being /index.html) whenever there is a request which fulfills the following criteria:

->The request is a GET request

->which accepts text/html,

->is not a direct file request, i.e. the requested path does not contain a . (DOT) character and

->does not match a pattern provided in options.rewrites (see options below)

We will install npm install?—?save connect-history-api-fallback

Open the package.json and delete start”: “webpack-dev-server?—?hot” inside “scripts” object. We are deleting this line since we will not do any testing in this tutorial. Let’s add the start command instead.

“start”: “webpack-dev-server?—?hot –history-api-fallback”

Running the Server

The setup is complete and we can start the server by running the following command.

npm start

It will show the port we need to open in the browser. In our case, it is http://localhost:8545/. After we open it, we will see the following output.

When You click login you will see the following output.

Also Read:- How To Use the New React Context API

Source Code : GitHub - CrowdInventiv

Author Biography.

Lokesh Gupta
Lokesh Gupta

Overall 3+ years of experience as a Full Stack Developer with a demonstrated history of working in the information technology and services industry. I enjoy solving complex problems within budget and deadlines putting my skills on PHP, MySQL, Python, Codeigniter, Yii2, Laravel, AngularJS, ReactJS, NodeJS to best use. Through Knowledge of UML & visual modeling, application architecture design & business process modeling. Successfully delivered various projects, based on different technologies across the globe.

Join Our Newsletter.

Subscribe to CrowdforThink newsletter to get daily update directly deliver into your inbox.

CrowdforGeeks is where lifelong learners come to learn the skills they need, to land the jobs they want, to build the lives they deserve.


CrowdforThink is a leading Indian media and information platform, known for its end-to-end coverage of the Indian startup ecosystem.


Our mission is "Har Koi Dekhe Video, Har Ghar Dekhe Video, Ghar Ghar Dekhe Video" so we Provide videos related to Tutorials, Travel, Technology, Wedding, Cooking, Dance, Festivals, Celebration.

Apna Video Wala

News & Blogs


Best React Libraries That Are Worth Trying In 2023

As per the Stack Overflow survey, React.js was the 2nd most popular web framework after Node...


How To Deploy Your React Website in 2022!

Different React applications need different arrangement arrangements in view of their case. In th...


Higher-Order Components in React

A higher-request component (HOC) is a high level method in React for reusing component rationale....

Top Authors

Lamia Rochdi is the Marketing Manager at Bell Flavors & Fragrances EMEA. A successful family-...

Lamia Rochdi

I’m Mertin Wilson a technician in a camera company and certified expert of different P...

Mertin Wilson

Zakariya has recently joined the PakWheels team as a Content Marketing Executive, shortly after g...

Zakariya Usman

Pankaj Singh is a Senior Digital Marketing Consultant with more than 2 years of experience in SEO...

Pankaj Singh

Our Client Says

WhatsApp Chat with Our Support Team