Skip to content

Spoke Right

Education for everyone

https://spokeright.com
Primary Menu
  • Home
  • Our Services
    • Translation
    • Interpretation
    • Transcription
    • Voice-Over
    • Proofreading
    • Content writing
  • Free Education
    • Learn Android Studio
    • Learn Python
    • Learn MongoDB
    • Learn MySql
    • Learn React
    • Montessori Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
    • TicTac
    • Checkers
    • Foosball
    • Billiards
    • Master Chess
    • Logic Game
  • Contact Us
Download Now
  • Home
  • Learn React
  • What is Router in reactJS
  • Learn React

What is Router in reactJS

Spoke Right December 14, 2022 5 min read

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.

Continue Reading

Previous: What are fragments in React JS
Next: How do you use flux in Reactjs

Related Stories

Which is Difference Between AngularJS And ReactJS
1 min read
  • Learn React

Which is Difference Between AngularJS And ReactJS

December 16, 2022
What is higher-order component in Reactjs
2 min read
  • Learn React

What is higher-order component in Reactjs

December 16, 2022
How do I create a table in ReactJS
2 min read
  • Learn React

How do I create a table in ReactJS

December 16, 2022

This AD Will support Us

Support Us

Coding Ustad LTD Support
Coding Ustad LTD Support

Coding Ustad LTD

Coding Ustad LTD
Coding Ustad LTD

Recent Posts

  • How to Install Node.js and npm on CentOS 7
  • How to Install Node.js and npm on CentOS 7
  • How to Install CentOS Web Panel (CWP) on CentOS 7
  • The Power of Marketing in Real Estate: A Guide to Boost Your Business
  • Vehicle Verification in Pakistan

Get free Hosting

Hostens.com - A home for your website

You may have missed

How to Install Node.js and npm on CentOS 7
4 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install Node.js and npm on CentOS 7

May 3, 2023
How to Install Node.js and npm on CentOS 7
4 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install Node.js and npm on CentOS 7

May 2, 2023
How to Install CentOS Web Panel (CWP) on CentOS 7
3 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install CentOS Web Panel (CWP) on CentOS 7

May 2, 2023
The Power of Marketing in Real Estate: A Guide to Boost Your Business https://thaikadar.com/secureinvestment/
2 min read
  • Article By Spoke Right
  • Blog By Spoke Right
  • Circular Byte Private Limited

The Power of Marketing in Real Estate: A Guide to Boost Your Business

January 30, 2023
  • Home
  • Our Services
  • Free Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
  • Contact Us
Copyright © All rights reserved. | MoreNews by AF themes.