React Router

npm install react-router-dom 

In a React application, developers can handle routing and navigation with the React Router library. Users can navigate between different parts of a web application without refreshing the page by using this declarative way of defining routes.

Example

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

// Components for different routes
const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;
const Contact = () => <h1>Contact Page</h1>;

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
      </Switch>
    </Router>
  );
};

export default App; 

The following example imports react-router-dom components and defines three components (Home, About, and Contact) for each page of our application.

The Router component is wrapped around our routes in the App component to provide routing functionality. In order to create navigation links, we use the Link component, which creates anchor tags (a) with the specified URLs.

Route components are used to define routes within the Switch component. In the home route, the exact keyword matches the exact path, whereas in other routes, the path prop specifies the URL and the component to render when it matches the path.

A navigation link will appear when you run the application, and clicking on it will render the components corresponding to the current URL.

The following are some of the key features and concepts of React Router:

BrowserRouter:

An application's root level typically uses this component. In addition to providing appropriate routing capabilities, it uses HTML5 history API to keep the UI in sync with the URL.

Route:

Using the Route component, you can map a URL path to a React component. A component is rendered if its path matches the current URL.

Switch:

Using the Switch component, you can render only the first matching Route or Redirect component. The feature is useful when you need to render routes that are exclusive.

Link and NavLink:

Your application uses these components to create links. These scripts generate anchor tags (a) with the specified URL and handle navigation without refreshing the page. Additionally, NavLink allows active links to be styled.

Redirect:

Users can be redirected from one route to another using the Redirect component. Whenever the path matches, the new location is rendered.

Route Parameters:

A parameter defines a dynamic segment in your URL in React Router. By using the useParams hook or the match.params object, you can access these parameters within your components.

Nested Routes:

Components can nest routes within React Router. Hierarchical navigation structures are enabled by child routes rendered inside parent components.

Another Example

import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "../Home";
import PageOne from "../PageOne";
import PageTwo from "../PageTwo";
import PageThree from "../PageThree";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />}>
          <Route path="one" element={<PageOne />} />
           <Route path="two" element={<PageTwo />} />
            <Route path="three" element={<PageThree />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);