Jobs
Blogs
Courses
Mentorship
Partners
For Employers
e2e logo

Router In React

mac

Router

                                  

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

                     React Router is a standard library system built on top of the React and used to create routing in the React application using React Router Package. It provides the synchronous URL on the browser with data that will be displayed on the web page. It maintains the standard structure and behavior of the application and 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 application. Without React Router, it is not possible to display multiple views in React applications. Most of the social media websites like Facebook, Instagram uses React Router for rendering multiple views.


Installation:

Most modern React projects manage their dependencies using a package manager like npm .To add React Router to an existing project,  first add React Router in your application, run this in the terminal from the root directory of the application.

 

Create Components: 

                    Once your project is set up and React Router is installed as adependency, open the src file and create Component.In the Component file create your components.we will create four components. The Home component will be used as a tab menu. The other three components About.js, Contact.js and Career.js are rendered once the route has changed.

 

Home.js


About.js


Contact.js

 

 Career.js

 

 

Link.js

      In this component we create link to the other components.

 

      Finaly import the Home.js in the App.js.

              When the app is started, we will see three clickable links that can be used to change the route.

 


Protected routes

                                  Protected routes are those routes that only grant access to authorized users. This means that users must first meet certain conditions before accessing that specific route. For instance, your application can require only logged-in users be able to visit the dashboard page.

 Thank you...