Reactjs Router using  react-router, react-router-dom, and react-router-native

Reactjs router most powerful routing library, It helps in adding new screens and flows of application. It provides a sync URL with data that’s be displayed on the web page. It maintains standard structure and behavior and It is used for developing single page web applications.

Currently in your mind will be clicking that why am i using react router ?

Reactjs router use to define multiple routes and when a user types a specific URL into the browser, if this URL path matches any ‘route’ defined inside the router file, then the user will be redirect to that particular route. So basically, we need to add a Router library to our application that allows creating multiple routes with each leading to us a unique screen.

Installation

There are three packages for react router.

  • react-router
  • react-router-dom
  • react-router-native

You can not install react-router directly in your application. react-router provides the core routing components and functions for React Router applications. react-router-native uses for mobile applications design and react-router-dom uses for web applications design.

So first of all you need to install react-router-dom modules

You need to create the Routes.js file and import the all require component into Routes.js file. As like you can see in below code we have imported the Home, App,  AutoFocusTextInput and Error404 component in Routes file.

The Real Benefits Of React Router v4

There are many benefits of React Router

  1. You don’t need to set the browser history manually.
  2. React Router library is split into 3 separate packages like react-router-dom, react-router-native, react-router-core.
  3. Link uses to navigate the internal links in your application. It’s as like anchor tag.
  4. Uses Switch feature.
  5. The Router have only a Single Child element.
  6. Every Component specified in <Route>.
  7.  IndexRoute is replaced by ‘exact‘.
 Why Do We Need A React Router?

If you want to display multiple views in single page application then you need to use React Router. Because you are not able to display multiple views without React Router. You noticed the most popular social media websites like Facebook, Instagram which render multiple views using React. That is also using React Router.

 

Categories: React

Leave a Reply

1 Comment on "Reactjs router"

avatar
  Subscribe  
newest oldest most voted
Notify of
Vineet
Guest
Vineet

How to use IndexRoute ??

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.