React JS Router

React JS Router: Here, we will learn about building applications using react-router. So first, what is a Router? A router is a hardware device designed to receive, analyze and move incoming packets to another network. In the frontend, A router that navigates the user to different, every JavaScript framework or library has a Router option.

The router is a very important topic. The router in React is based on components. Initially, react-router is not provided, we have to install react-router by the following command in Node JS:

npm install --save react-router-dom

This will install react-router in your application and we can import react-router by:

// using ES6 modules
import { Browser Router, Route, Link } from 'react-router-dom
// using CommonJS modules
var Browser Router = require('react-router-dom'). Browser Router
var Route = require('react-router-dom').Route
var Link = require('react-router-dom').Link

In plain Html we can install react-router by just linking to react-router:

<script type="text/javascript" src="path/to/react_router.js"></script>

In this topic, we will create a small app using React router. Navigation to different URLs like:

The above will be our routers, The First one will be our homepage, the second page will be about us page, third will contact us page and the Fourth and Fifth page will be authentication pages.

Go ahead and create those components, remember in ReactJS the router is based on components

class App extends React.Component{
render() {
return(
<div>
<Navbar />
<ReactRouter.Router history={React-
Router.hashHistory]>
<React Router. Route path="/component= {Home>>
</ReactRouter.Route>
<React Router.Route path="/login"component={Login}>
</ReactRouter.Route>
<React Router.Route path="/signup"component={Signup]>
</React Router. Route>
<React Router.Route path="/contact" component={Contact}>
</ReactRouter.Route>
<React Router.Route path="/about"component={About]>
</ReactRouter.Route>
</React Router. Router>
</div>
);
}
}
var destination = document.querySelector("#root");
ReactDOM.render
<div>
<App></App>
</div>,
destination
) ;

Navbar Component

class Navbar extends React.Component{
render() {
return(
<div className='navbar navbar-default'>
<div className%=Container' >
<div className=Navbar-header'>
<a className='navbar-brand'>React</a>
</div>
<div className='collapse navbar-collapse>
<ul className='navbar-nav nav navbar right' >
<li>
<a href="/home" >Home</a>
</li>
<li>
<a href="/about" > About</a>
</li>
<li>
<a href="/contact" > Contact</a>
</li>
<li>
<a href="/login" > Login</a>
</li>
<li>
<a href="/signup">Signup</a>
</li>
</ul>
</div>
</div>
</div>
) ;
}
}

Home Component

class Home extends React.Component
render({
return (
<div>
<div className="container">
<div className="col-sm-6 col-sm-off
set-3">
<h1> Welcome to our React App</h1>
<p>
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</div>
</div>
</div>
) ;
}
}

About Component

class About extends React.Component{
render() {
return(
<div>
<div className="container" >
<div className="row" >
<div className="col-sm-6 col-sm-offset-3">
<h1> Welcome to about us page</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</p>
</div>
</div>
</div>
</div>
) ;
}
}

Contact Component

class Contact extends React.Component
render() {
return (
<div>
<div className="container">
<div className="row">
<div className="col-sm-6 col-sm-offset-3">
<form>
<div className="form-group" >
<label>Name</label>
<input className="form-control"placeholder="name" type="text" ></input>
</div>
<div className="form-group">
<label>Email</label>
<input className="form-control"
placeholder="name" type="text" ></input>
</div>
<div className="form-group" >
<label>Message</label>
<textarea className="form-control"
placeholder="name" type="text" ></textarea>
</div>
<div className="form-group">
<button className="btn btn-info"> Contact</button>
</div>
</form>
</div>
</div>
</div>
</div>
) ;
}
}

Signup Component

class Signup extends React.Component
rendero
return (
<div>
<div className="container">
<div className%="row">
<div className="col-sm-6 col-sm-offset-3">
<form>
<div className="form-group" >
<label>Email</label>
<input type="text" className=
"form-control" />
</div>
<div className="form-group" >
<label>Full Name</label>
<input type="text" className="form-control" />
</div>
<div className="form-group">
<label> username</label>
<input type="text" className="form-control" />
</div>
<div className="form-group">
<label>Password</label>
<input type="password" className= "form-control" />
</div>
<div className="form-group">
<button className="btn btn-info">Signup</button>
</div>
</form>
</div>
</div>
</div>
</div>
) ;
}
}

Login Component

class Login extends React.Component{
render() {
return
<div>
<div className="container">
<div className="row">
<div className="col-sm-6 col-sm-offset-3">
<form>
<div className="form-group">
<label>username</label>
<input type="text" className="form-control" />
</div>
<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" />
</div>
<div className="form-group">
<button className="btn btn-info"> Login</button>
</div>
</form>
</div>
</div>
</div>
</div>
) ;
}
}
class App extends React.Component {
render(){
return
<div>
<Navbar />
<React Router.Router history={ReactRouter.hashHistory}>
<React Router.Route path="/" component={Home}>
</ReactRouter.Route>
<React Router.Route path="/login"component={Login}>
</React Router.Route>
<ReactRouter.Route path="/signup"component={Signup}>
</React Router. Route>
<React Router.Routepath="contact"component={Contact}>
</ReactRouter.Route>
<React Router. Route path="/about"component={About}>
</React Router. Route>
</ReactRouter.Router>
</div>
);
}
}
var destination = document.querySelector("#root");
ReactDOM.render(
<div>
<App></App>
</div>,
destination
);
</script>
</body>
</html>

Routing System Example

Now think in terms of URL parameters like user/1,user/2 let’s build a Routing system for users.

Users.js will list all users and user.js will show only one user who is selected. Now add users and user routes in app.js

import React from 'react';
import Home from '/home.js';
import Login from './login.js';
import Users from '/user.js';
import User from './user.js';
import Signup from\/signup.js';
import Navbar from './navbar.js';
import Contact from './contact.js';
import About from './about.js';
import {Switch, BrowserRouter, Route } from
'react-router-dom';
export default class App extends React.Component{
render() {
return(
<div>
<Navbar />
<Browserrouter>
<Switch>
<Route path="/home" component={Home }/>
<Route path="/about" component={About}/>
<Route path="/users" component={Users} />
<Route path="/user/:id" component={User} />
<Route path="/contact" component={Contact} />
<Route path="/signup" component={Signup} />
<Route path="/login" component={Login}/>
</Switch>
</Browserrouter>
</div>
) ;
}
}

We have added users and user to your route, Now add content to your user.js and users.js

class Users extends React. Component
render() {
return (
<div className='container"><ul>
<li><a href="#/user/1'>John</a></li>
<li><a href="#/user2'>Does</a></li>
<li><a href='#/user/3'>Michael</a></li>
</ul>
</div>
) ;
}
}

Users Component

class Users extends React.Component{
render() {
return(
<div className='container">
<ul>
<li><a href='#/user/1'>John</a></li>
<li><a href="#/user2'>Does</a></li>
<li><a href='#/user/3'>Michael</a></li>
</ul>
</div>
) ;
}
}

Now go to navbar.js and add a link to users,

<li>
<a href="/users" > Users</a>
</li>

User’s Component Example Output

This will take us to users, Users will look like this:

User Component Example Output

If we click one of the users, the react-router will take us to the user view page.

Now we have got a working routing example. This is our final exercise:

<!DOCTYPE html>
<html>
<head>
<title>React Hello World</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="root" ></div>
<script type="text/javascript" src="react.min.js"></script>
<script type="text/javascript" src="reactdom.min.js"></script>
<script type="text/javascript"src="react_router.js"></script>
<script type="text/javascript"src="browser.min.js"></script>
<script type="text/babel">
class Navbar extends React.Component{
render() {
return (
<div className='navbar navbar-default' >
<div className='container' >
<div className='navbar-header' >
<a className='navbar-brand' >React</a>
</div>
<div className='collapse navbar collapse' >
<ul class Name= Navbar-nav nav navbar-right' >
<li>
<a href="#/">Home</a>
</li>
<li>
<a href="#/about" >About</a>
</li>
<li>
<a href="#/contact" >Contact</a>
</li>
<li>
<a href="#/users" >Users</a>
</li>
<li>
<a href="#/login" >Login</a>
</li>
<li>
<a href="#/signup" >Signup</a>
</li>
</ul>
</div>
</div>
</div>
) ;
}
}
class Users extends React.Component{
render() {
return(
<div className='container">
<ul>
<li><a href="#/user/1'>John</a></li
<li><a href="#/user/2'>Does</a></li>
<li><a href="#/user/3'>Michael</a></li>
</ul>
</div>
) ;
}
}
class User extends React.Component
render() {
var users = [
("John"),
("Does"),
["Micheal"],
];
return (
<div className='container">
You are viewing user: {users[0]}
<br />
<a href='#/users' >Users</a>
</div>
);
}
}
class Home extends React.Component
render() {
return
<div>
<div className="container">
<div className="col-sm-6 col-sm offset-3">
<h1> Welcome to our React App</h1>
<p>
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</div>
</div>
</div>
);
}
}
class About extends React.Component
render() {
return (
<div>
<div className="container">
<div className="row" >
<div className="col-sm-6 col-sm offset-3" >
<h1>Welcome to about us page</
h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</p>
</div>
</div>
</div>
</div>
) ;
}
}
class Contact extends React.Component{
render() {
return(
<div>
<div className="container">
<div className="row">
<div className="col-sm-6 col-sm offset-3">
<form>
<div className="form-group">
<label>Name</label>
<input className="form-control"placeholder="name" type="text" ></input>
</div>
<div className="form-group">
<label>Email</label>
<input className="form-control" placeholder="name" type="text" ></input>
</div>
<div className="form-group">
<label>Message</label>
<textarea className="formcontrol" placeholder="name" type="text" ></textarea>
</div>
<div className="form-group">
<button className="btn btn info">Contact</button>
</div>
</form>
</div>
</div>
</div>
</div>
) ;
}
}
class Signup extends React.Component{
render() {
return (
<div>
<div className="container">
<div className="row">
<div className="col-sm-6 col-sm offset-3">
<form>
<div className="form-group"<label>Email</label>
<input type="text" className="form-control" />
</div>
<div className="form-group">
<label>Full Name</label>
<input type="text" className%="form-control" />
</div>
<div className="form-group" >
<label>username</label>
<input type="text" className="form-control" />
</div>
<div className="form-group" >
<label>Password</label>
<input type="password" class-Name="form-control"/>
</div>
<div className="form-group" >
<button className%="btn btn-
info" >Signup</button>
</div>
</form>
</div>
</div>
</div>
</div>
);
}
}
class Login extends React.Component{
render() {
return (
<div>
<div className="container">
<div className="row" >
<div className="col-sm-6 col-sm offset-3">
<form>
<div className%3"form-group" >
<label>username</label>
<input type="text" className="form-control" />
</div>
<div className="form-group">
<label>Password</label>
<input type="password" class
Name="form-control" />
</div>
<div className="form-group">
<button className="btn btn
info">Login</button>
</div>
</form>
</div>
</div>
</div>
</div>
);
}
}
class App extends React.Component {
render() {
return
<div>
<Navbar />
<React Router. Router history={React
Router hashHistory
<React Router. Route path="/"component={Home)>
</React Router.Route>
<React Router. Route path="/login"component-{Login}>
</React Router. Route>
<React Router. Route path="/signup"component={Signup}>
</React Router.Route>
<React Router Routepath="/contact"component={Contact}>
</React Router. Route>
<React Router. Route path="/about"component={About}>
</React Router. Route>
<React Router.Route path="/users"component={Users}>
</React Router.Route>
<React Router. Route path="/user/:id"component={User}>
</React Router. Route>
</ReactRouter.Router>
</div>
) ;
}
}
var destination = document.querySelector("#root");
ReactDOM.render(
<div>
<App></App>
</div>,
destination
);
</script>
</body>
</html>

Now go ahead and copy this file content and paste it in an HTML file and you will be greeted with a working example of React Routing.