/    /  ReactJS- React Router

React Router

 

React Routing is a process in which a user is directed to different web pages based on their action or request. ReactJS Router is used for developing Single Page Web Applications. React Router is used to define multiple routes in the web application. When a user types a specific URL into the web browser, and if this URL path matches any ‘route’ inside the router file, the user will be redirected to that particular page route.

React Router is a standard library system built on top of React and used to create routing in the React web application using React Router Package. It provides the synchronous URL on the web browser with data that will be displayed on the web page. It maintains the standard structure and behavior of the web application and is mainly used for developing single-page web applications.

 

Need of React Router:

React Router plays an important role to display multiple views in a single-page web application. Without a Router, it is not possible to display multiple views in React web applications. Most of the social media websites like Facebook, Instagram uses React Router for rendering multiple web pages.

 

React Router Installation:

three different packages

⦁ react-router: core routing components and functions.
⦁ react-router-native: mobile applications.
⦁ react-router-dom: web applications design.

npm install – -save react-router-dom

 

What is Route?

It is used to define and render components based on the specified URL path. It will accept react components and render to define what should be rendered.

EXAMPLE:

Step-1 : About.js

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

Contact.js:

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

App.js:

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

 

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 About from './about' 
import Contact from './contact' 

const routing = ( 
 <Router> 
  <div> 
   <h1>React Router Example</h1> 
   <Route path="/" component={App} /> 
   <Route path="/about" component={About} /> 
   <Route path="/contact" component={Contact} /> 
  </div> 
 </Router> 
) 
ReactDOM.render(routing, document.getElementById('root'));

 

Step-3: npm start

React Router
you will see About component is rendered on the web page.:

React Router

 

Step-4:

In the above screen, you can see that the Home component is still rendered. It is because the home path is ‘/’ and the about the path is ‘/about’, so you can observe that slash is common in both URL paths which render both components. To stop this behavior, you need to use the exact react prop.

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 About from './about' 
import Contact from './contact' 

const routing = ( 
 <Router> 
  <div> 
   <h1>React Router Example</h1> 
   <Route exact path="/" component={App} /> 
   <Route path="/about" component={About} /> 
   <Route path="/contact" component={Contact} /> 
  </div> 
 </Router> 
) 
ReactDOM.render(routing, document.getElementById('root'));

React Router

using Link component:

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 About from './about' 
import Contact from './contact' 

const routing = ( 
 <Router> 
  <div> 
   <h1>React Router Example</h1> 
   <ul> 
    <li> 
     <Link to="/">Home</Link> 
    </li> 
    <li> 
     <Link to="/about">About</Link> 
    </li> 
    <li> 
     <Link to="/contact">Contact</Link> 
    </li> 
   </ul> 
   <Route exact path="/" component={App} /> 
   <Route path="/about" component={About} /> 
   <Route path="/contact" component={Contact} /> 
  </div> 
 </Router> 
) 
ReactDOM.render(routing, document.getElementById('root'));

React Router

click on the About, you will see URL is changing:

React Router