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.

 npm i -D react-router-dom

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

import React from 'react';
import About from './About';
import Contact from './Contact';
import Career from './Career';
 
function HomePage() {
return (
             <BrowserRouter>    
                      <Routes>
                                <Route path="/" element={<Links />} />
                                <Route exact element={<HomePage />} />
                                <Route path="about" element={<About />} />           
                                <Route exact path="contact" element={<Contact />} />
                                <Route path="education" element={<Education />} />
                    </Routes> 
</BrowserRouter>
    )
}
export default HomePage;

About.js

import React from 'react';
 
function About(){
       return(
            <div>
                  <p> A.P.J. Abdul Kalam, in full Avul Pakir Jainulabdeen Abdul Kalam, (born October 15, 1931, Rameswaram, India—died July 27, 2015, Shillong), Indian scientist and politician who played a leading role in the development of India’s missile and nuclear weapons programs. He was president of India from 2002 to 2007.</p>
        </div>
    )
}
export default About;

Contact.js

import React from 'react';
 
function Contact(){
    return(
        <div>
             <address>
                       Celeste Slater <br/>
                        606-3727 Ullamcorper. Street<br/>
                        Roseville NH 11523<br/>
                        (786) 713-8616
             </address>       
     </div>
    )
}
export default Contact;

Career.js

import React from 'react';
 
function Career(){
    return(
        <div>
            <p>Kalam earned a degree in aeronautical engineering from the Madras Institute of Technology and in 1958 joined the Defence Research and Development Organisation (DRDO). In 1969 he moved to the Indian Space Research Organisation, where he was project director of the SLV-III, the first satellite launch vehicle that was both designed and produced in India. Rejoining DRDO in 1982, Kalam planned the program that produced a number of successful missiles, which helped earn him the nickname “Missile Man.” Among those successes was Agni, India’s first intermediate-range ballistic missile, which incorporated aspects of the SLV-III and was launched in 1989.</p>
        </div>
    )
}
export default Career;

Link.js

In this component we create link to the other components.

import React from 'react'
import Link  from "react-router-dom";
 
 function Links(){
    return(
        <div>
            <nav>
                <ul>
                    <li>
                         <Link to="/">Home</Link>
                    </li>
                    <li>
                         <Link to="/contact">Contact</Link>
                    </li>
                    <li>
                       <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/education">Education</Link>
                    </li>
 
                </ul>
            </nav>
          
        </div>
    )
}
export default  Links;

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

 import React from 'react-router-dom';
 import MovingPage from './Components/pages/Home.js';
 function App() {
     return (
           <div className="App">
                <Home/>
           </div>
  );
}
export default App;

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...