React Router Routing and navigation in React

React Router is a popular library for routing and navigation in React applications. It allows you to define routes and URLs for your application, and navigate between them using links or programmatic navigation.

Here’s an example of how to use React Router to define routes and navigation in a simple application:

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

function Home() {
  return 

Welcome to the home page!

; } function About() { return

About us

; } function Contact() { return

Contact us

; } function App() { return ( ); }

In this example, we’re defining three components (`Home`, `About`, and `Contact`) that represent different pages in our application. We’re also defining an `App` component that uses React Router to define routes and navigation.

We’re using the `BrowserRouter` component to wrap our application and provide routing functionality. We’re also using the `Link` component to create links to different routes, and the `Route` component to define the content to be rendered for each route.

We’re using the `Switch` component to ensure that only one route is matched at a time. We’re also using the `exact` prop on the `/` route to ensure that it only matches the root URL, and not any sub-routes.

Overall, React Router is a powerful library that allows you to create flexible and dynamic user interfaces with routing and navigation. By using React Router, you can create complex applications with multiple pages, nested routes, and programmatic navigation, and provide a seamless user experience for your users.