ReactJs

Routing in React  

React Router DOM is an npm package that enables you to implement dynamic routing in a web app. It allows you to display pages and allow users to navigate them. It is a fully-featured client and server-side routing library for React. React Router Dom is used to build single-page applications i.e. applications that have many pages or components but the page is never refreshed instead the content is dynamically fetched based on the URL. This process is called Routing and it is made possible with the help of React Router Dom.

The major advantage of react-router is that the page does not have to be refreshed when a link to another page is clicked, for example. Moreover, it is fast, very fast compared to traditional page navigation. This means that the user experience is better and the app has overall better performance.

React Router Dom v6 has many useful components and to create fully functioning routing, you need most of these.

Router(usually imported as BrowserRouter):  It is the parent component that is used to store all of the other components. Everything within this will be part of the routing functionality
Routes: routes are used to define the navigation paths within a single-page application (SPA). Routes determine which components should be rendered based on the current URL or location of the application.
Route: This component checks the current URL and displays the component associated with that exact path. All routes are placed within the Routes components.
Link: Link component is used to create links to different routes.
The Route component takes 2 parameters. The first one is the path that will be in the url and the second is the component that will be displayed if the current URL matches the path in the first parameter. 

Step 1) ctl +c
Step 2)  npm i react-router-dom 
Step 3) npm start
Step 4) open package.json

To verify library check here

Step 5) Make changes in app.js

import './App.css';
import { BrowserRouter,Routes,Route } from 'react-router-dom';
import Homepage from './pages/homepage';
import Registrationpage from './pages/registrationpage';

function App() {
  return (
    <>
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Homepage/>} />
        <Route path='/registration' element={<Registrationpage/>} />
      </Routes>
    </BrowserRouter>
    </>
  );
}

export default App;