ReactJS Router

React Router is a popular library for routing in React applications. Here is a detailed explanation of how to use React Router:

Installation: To use React Router in your React application, you will need to install it as a dependency. You can install React Router using npm or yarn:

npm install react-router-dom 

yarn add react-router-dom

Basic usage: Once you have installed React Router, you can use the <Route> component to define a path and component to render for that path. Here is an example of how to use the <Route> component to render a component based on the current URL:

import { BrowserRouter as Router, Route } from 'react-router-dom'; 
	
function App() { 
	return ( <Router> 
			<Route path="/home" component={Home} /> 
			<Route path="/about" component={About} /> 
			<Route path="/contact" component={Contact} /> 
		</Router> ); 
}

In this example, the App component is wrapped in a <Router> element and defines three routes with different paths and components to render for each path.

Nested routes: You can use nested routes to define routes within a component. This can be useful if you want to define routes for a specific section of your application. Here is an example of how to use nested routes to define routes for a /products path:

import { Route } from 'react-router-dom'; 
	
function Products() { 
	return ( <div> 
		<Route path="/products/:id" component={ProductDetail} /> 
		<Route exact path="/products" component={ProductList} /> 
	</div> ); 
}

In this example, the Products component defines two routes: one for a specific product detail and one for a list of products. The /products/:id route uses a dynamic path segment (:id) to match a specific product.

Link navigation: You can use the <Link> component from React Router to navigate to a different route. Here is an example of how to use the <Link> component to navigate to the /about route:

import { Link } from 'react-router-dom'; 

function Home() { 
	return ( <div> 
		<Link to="/about">About</Link> 
	</div> ); 
}

In this example, the Home component includes a link that navigates to the /about route when clicked.

Here are a few more things you might want to know about using React Router:

You can use the <Switch> component to wrap a group of <Route> components and ensure that only one route is rendered at a time. This can be useful if you have routes that might match the same path and you want to ensure that only one is rendered. Here is an example of how to use the <Switch> component:

import { Switch, Route } from 'react-router-dom'; 
	
function App() { 
	return ( <Switch> 
		<Route exact path="/home" component={Home} /> 
		<Route exact path="/about" component={About} /> 
		<Route exact path="/contact" component={Contact} /> 
	</Switch> ); 
}

In this example, the <Switch> component wraps the <Route> components and ensures that only one is rendered at a time.

You can use the <Redirect> component to redirect to a different route. This can be useful if you want to redirect the user to a different route based on a certain condition. Here is an example of how to use the <Redirect> component:

import { Redirect } from 'react-router-dom'; 
	
function App() { 
	return ( <Redirect to="/home" /> ); 
}

In this example, the App component will redirect the user to the /home route.

You can use the useLocation hook from React Router to get the current location object. This can be useful if you want to get the current path or query parameters from the URL. Here is an example of how to use the useLocation hook:

import { useLocation } from 'react-router-dom'; 
	
function Home() { 
	const location = useLocation(); 
	
	console.log(location.pathname); 
	// current path 
	
	console.log(location.search); 
	// current query string 
}