Router in ReactJS

by

React Router

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.

 

Command: 

$ npm install react-router-dom --save

 

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 
Blog
  
}  
}  
export default Blog;

Services.js:

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

App.js:

import React from 'react'  
class App extends React.Component {  
render() {  
return (  

  

Home
  

  
)  
}  
}  
export default App;

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 = (  
  

  

Routing
  
  
  
  

  
  
)  
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:
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 = (

Routing

) ReactDOM.render(routing, document.getElementById('root'));

Output:
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 = (

Routing

  • Home
  • Blog
  • Services
) ReactDOM.render(routing, document.getElementById('root'));

Output 1: When active link is Home.
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 = (

Routing

  • Home
  • Blog
  • Services
) ReactDOM.render(routing, document.getElementById('root'));

Output 1: When active link is Home.
import React from 'react' const Notfound = () =>

Does not exist.

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 = (  
  

  

Routing
  

      

  •   
Home  

    •   

  •   
Blog  

    •   

  •   
Services  

    •   


  
  
  
  
  
  

  
  
)  
ReactDOM.render(routing, document.getElementById('root'));

Output:
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 = (

Routing

  • Home
  • Blog
  • Services
) ReactDOM.render(routing, document.getElementById('root'));

Services.js:

import React from 'react'  
import { Route, Link } from 'react-router-dom'  
const Services = ({ match }) => 
{match.params.id}
  
class Services extends React.Component {  
render() {  
const { url } = this.props.match  
return (  

  

We are checking for the Services offered.
  
Select any Service.  

      

  •   
Service 1   

    •   

  •   
Service 2   

    •   

  •   
Service 3   

    •   

  •   
Service 4   

    •   

  
  

  
)  
}  
}  
export default Services;

Output 1: Before clicking on the Services link.