React Router

 

React Router

*     React Router is mainly used for developing a single page web Applications. It plays an important role to display multiple view in a single page application.

*     Routing is a process in which a user is directed to different pages based on their action (or) request.

*     When a user types a specific URL into the browser , and if the URL path matches any route inside the router file, the user will be redirected to the particular route.

*     Most of the social media websites like facebook,instagram uses React router for rendering multiple view.

React Router Installation

*     React Router is a standard library system.If you want to create routing in the React application using React Router Package.

*     It is not possible to install react-router directly in your application.To use react routing, first ,you need to install react-router-dom modules in your application.

*     To install React router dom use this command

$npm install react-router-dom –save

 

React-router-dom use:

It is used for web application design.

 

import {BrowserRouter as Router,Route,Link,NavLink,Switch}

Route:

*     Route is the conditionally shown component based on matching a path to a URL.

*     If search engine URL==Browse URL match route will redirect

Browser Router:

*     Browser Router will store Browsing history in Browser Memory

*     Browser Router is the router implementation.It uses HTML5 history API(i.e.,pushState,replaceState and popState API)to keep your UI in sync with the URL.

 

Memory Router:

*     In Memory Router Browsing history will not stored in browser.

*     Memory router keeps the URL changes in memory not in the user browsers.

*     It does not read (or) write to the address bar so the user can not use  the browser’s back button as well as the forward button.It is very useful for testing and non-browser environment like React Native.

 

Link:

*     Link is your replacement for anchor tags.sometimes, we want to need multiple links on a single page.This <Link> component is used to create links which allow to navigate on different URLs and render its content without reloading the webpage.

 

   NavLink:

*     NavLink component is used to add style to the active routes and add properties activeStyle.

*     The activeStyle properties mean when we click on the link, it should have a specific style so that we can differentiate which one is currently active.

 

Switch:

*     The <switch> component is used to render components only when the path will be matched.

*     Otherwise, it returns to the not found component.