What is Router in reactJS

Published by Spoke Right on

Router In ReactJS

The process of directing a user to different pages based on their action or request is known as routing. In ReactJS the process of routing is used for developing Single Page Web Applications, mainly to define multiple routes in the application. The ReactJS provides a standard library system to create routing in the React application using React Router Package.

Importance of React Router:

  • To display multiple views in a single page application, React Router is important.
  • It is not possible to display multiple views in React applications without the React Router.
  • For rendering multiple views, React Router is used by most of the social media websites.

Advantages Of React Router:

  • It is not mandatory in React Router to set the browser history manually.
  • The internal links can be navigated using the Links in the application.
  • Switch feature is used in React Router for rendering.
  • Only a Single Child element is needed.
  • Every component is specified in the React Router.

React Router Installation:

There are three different packages for routing in ReactJS.

  • react-router: The core routing components and functions for the React Router applications is provided by the react-router.
  • react-router-native: For mobile applications, react-router-native is used.
  • react-router-dom: For web applications design, react-router-dom is used.

The react-router-dom modules need to be installed in the user’s application, to use react routing, as it is not possible to install react-router directly.

Components in React Router: 

There are two types of components in the React router.

  • <BrowserRouter>: Used for handling the dynamic URL.
  • <HashRouter>: Used for handling the static request.

Example: Routing Step 1:
Blog.js:

import React from 'react'  
class Blog extends React.Component {  
render() {  
return <h1>Blog</h1>  
}  
}  
export default Blog;

Services.js:

import React from 'react'  
class Services extends React.Component {  
render() {  
return <h1>Services</h1>  
}  
}  
export default Services;

App.js:

import React from 'react'  
class App extends React.Component {  
render() {  
return (  
<div>  
<h1>Home</h1>  
</div>  
)  
}  
}  
export default App;

Command: 

Explanation:
Here, two components are created along with the already present App.js.

Route:
To define and render component based on the specified path, Route is used.

Routing Step 2:
Index.js:

import React from 'react';  
import ReactDOM from 'react-dom';  
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'  
import './index.css';  
import App from './App';  
import Blog from './blog'  
import Services from './services'  
const routing = (  
<Router>  
<div>  
<h1>Routing</h1>  
<Route path="/" component={App} />  
<Route path="/blog" component={Blog} />  
<Route path="/services" component={Services} />  
</div>  
</Router>  
)  
ReactDOM.render(routing, document.getElementById('root'));

Explanation:
For Routing, the process will then flow as; opening the index.js file; importing all the three component files in it; importing line: import { Route, Link, BrowserRouter as Router } from ‘react-router-dom’ to implement the Routing.

Routing Step 3:
● Open the command prompt.
● Go to the project location.
● Type npm start.

Output:

● Enter localhost:3000/blog, manually in the browser.

Output:

Routing Step 4:
Index.js:

import React from 'react';  
import ReactDOM from 'react-dom';  
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'  
import './index.css';  
import App from './App';  
import Blog from './blog'  
import Services from './services'  
const routing = (  
<Router>  <div>  
<h1>Routing</h1>  
<Route exact path="/" component={App} />  
<Route path="/blog" component={Blog} />  
<Route path="/services" component={Services} />  
</div>  
</Router>  
)  
ReactDOM.render(routing, document.getElementById('root'));

Output:

Explanation:
To avoid the rendering of the Home component, the exact prop is used.

Adding Navigation using Link component:
To create links which allow navigating on different URLs component is used. It allows the rendering of the links’ content without reloading the webpage. In simple words, to allow multiple linking on a single page, component needs to be imported in the index.js file.

Example:
Index.js:

import React from 'react';  
import ReactDOM from 'react-dom';  
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'  
import './index.css';  
import App from './App';  
import Blog from './blog'  
import Services from './services'  
const routing = (  
<Router>  
<div>  
<h1>Routing</h1>  
<ul>  
<li>  
<Link to="">Home</Link>  
</li>  
<li>  
<Link to="/blog">Blog</Link>  
</li>  
<li>  
<Link to="/services">Services</Link>  
</li>  
</ul>  
<Route exact path="/" component={App} />  
<Route path="/blog" component={Blog} />  
<Route path="/services" component={Services} />  
</div>  
</Router>  
)  
ReactDOM.render(routing, document.getElementById('root'));

Output 1: When active link is Home.

Explanation:
Routes are rendered on the screen after adding Link.

The component:
To add style to the active routes, the NavLink component is used.

Example:
Index.js:

import React from 'react';  
import ReactDOM from 'react-dom';  
import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom'  
import './index.css';  
import App from './App';  
import Blog from './blog'  
import Services from './services'  
const routing = (  
<Router>  
<div>  
<h1>Routing</h1>  
<ul>  
<li>  
<NavLink to="/" exact activeStyle={  
{color:'green'}  
}>Home</NavLink>  
</li>  
<li>  
<NavLink to="/blog" exact activeStyle={  
{color:'blue'}  
}>Blog</NavLink>  
</li>  
<li>  
<NavLink to="/services" exact activeStyle={  
{color:'crimson'}  
}>Services</NavLink>  
</li>  
</ul>  
<Route exact path="/" component={App} />  
<Route path="/blog" component={Blog} />  
<Route path="/services" component={Services} />  
</div>  
</Router>  
)  
ReactDOM.render(routing, document.getElementById('root'));

Output 1: When active link is Home.

Explanation:
Here, we are adding some styles to the Link. Home link is of the colour green when it is the only currently active link. Blog link is of colour blue when it is the currently active link. Services link is of colour crimson when it is the currently active link.

React Router Switch:
To render components only when the path matches, the component is used.

Example:
notfound.js:

import React from 'react'  
const Notfound = () => <h1>Does not exist.</h1>  
export default Notfound

Index.js:

import React from 'react';  
import ReactDOM from 'react-dom';  
import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom'  
import './index.css';  
import App from './App';  
import Blog from './blog'  
import Services from './services'  
import Notfound from './notfound'  
const routing = (  
<Router>  
<div>  
<h1>Routing</h1>  
<ul>  
<li>  
<NavLink to="/" exact activeStyle={  
{color:'green'}  
}>Home</NavLink>  
</li>  
<li>  
<NavLink to="/blog" exact activeStyle={  
{color:'blue'}  
}>Blog</NavLink>  
</li>  
<li>  
<NavLink to="/services" exact activeStyle={  
{color:'crimson'}  
}>Services</NavLink>  
</li>  
</ul>
<Switch>  
<Route exact path="/" component={App} />  
<Route path="/blog" component={Blog} />  
<Route path="/services" component={Services} />  
<Route component={Notfound} />  
</Switch>  
</div>  
</Router>  
)  
ReactDOM.render(routing, document.getElementById('root'));

Output:

Explanation:
The not found error will be returned if we manually enter the wrong path.

React Router component:
To redirect to another route in an application, the component is used. It is used to maintain the old URLs and can be placed anywhere in the route hierarchy.

Nested Routing in React:
To render sub-routes in a ReactJS application, nested routing is done.

Example:
Index.js:

import React from 'react';  
import ReactDOM from 'react-dom';  
import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom'  
import './index.css';  
import App from './App';  
import Blog from './blog'  
import Services from './services'  
import Notfound from './notfound'  
const routing = (  
<Router>  
<div>  
<h1>Routing</h1>  
<ul>  
<li>  
<NavLink to="/" exact activeStyle={  
{color:'green'}  
}>Home</NavLink>  
</li>  
<li>  
<NavLink to="/blog" exact activeStyle={  
{color:'blue'}  
}>Blog</NavLink>  
</li>  
<li>  
<NavLink to="/services" exact activeStyle={  
{color:'crimson'}  
}>Services</NavLink>  
</li>  
</ul>
<Switch>  
<Route exact path="/" component={App} />  
<Route path="/blog" component={Blog} />  
<Route path="/services" component={Services} />  
<Route component={Notfound} />  
</Switch>  
</div>  
</Router>  
)  
ReactDOM.render(routing, document.getElementById('root'));

Services.js:

import React from 'react'  
import { Route, Link } from 'react-router-dom'  
const Services = ({ match }) => <p>{match.params.id}</p>  
class Services extends React.Component {  
render() {  
const { url } = this.props.match  
return (  
<div>  
<h1>We are checking for the Services offered.</h1>  
<strong>Select any Service.</strong>  
<ul>  
<li>  
<Link to="/services/1">Service 1 </Link>  
</li>  
<li>  
<Link to="/services/2">Service 2 </Link>  
</li>  
<li>  
<Link to="/services/3">Service 3 </Link>  
</li>  
<li>  
<Link to="/services/4">Service 4 </Link>  
</li>  
</ul>  
<Route path="/services/:id" component={Services} />  
</div>  
)  
}  
}  
export default Services;

Output 1: Before clicking on the Services link.

Output 2: After clicking on the Services link.

Explanation:
Here, we are importing the React Router component in the services.js file to implement the subroutes.

Categories: React
Tags:

Related Posts

React

Which is Difference Between AngularJS And ReactJS

Difference Between AngularJS And ReactJS AngularJS Vs ReactJS Listed below is a comparative study between the AngularJS and the ReactJS. AngularJS ReactJS Open-source JavaScript framework. Open-source JavaScript library.  Used to build a dynamic web application. Read more…

React

What is higher-order component in Reactjs

React Higher-Order Components Also known as HOC, the React Higher-Order Components is an advanced technique that takes a component and returns a new component. It is used for reusing component logic. Higher-Order Component Conventions: HOCs Read more…

React

How do I create a table in ReactJS

Table in ReactJS To store and display data in a structured format, an arrangement is created which organizes information into rows and columns. This arrangement is called a table. Features of React Table: Lightweight at Read more…