In React, routing is often handled using a library called React Router. React Router is a declarative way to navigate and manage views in a React application. Below, I’ll provide a basic introduction to React Router and its key components.
1) Installation:
First, you need to install React Router in your project. Open a terminal in your project directory and run:
bash
Copy code
npm install react-router-dom
2) Basic Usage:
Once installed, you can use React Router in your application.
a. Router Component:
Wrap your entire application with the BrowserRouter component. This component provides the navigation context for the rest of the application.
jsx
Copy code
// App.js
import React from ‘react’;
import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;
import Home from ‘./Home’;
import About from ‘./About’;
import Contact from ‘./Contact’;
const App = () => {
return (
);
};
export default App;
b. Route Component:
The Route component renders a UI component based on the current location’s pathname.
The path prop specifies the pathname for which the route should be active.
The component prop specifies the component to render for the given route.
c. Link Component:
Use the Link component to create navigation links.
jsx
Copy code
// Navigation.js
import React from ‘react’;
import { Link } from ‘react-router-dom’;
const Navigation = () => {
return (
- Home
- About
- Contact
);
};
export default Navigation;
d. Switch Component:
The Switch component is used to render the first Route or Redirect that matches the current location.
3)Route Parameters:
You can capture dynamic values from the URL using route parameters.
jsx
Copy code
// App.js
// …
// …
In the User component, you can access the userId from props.match.params.userId.
4)Programmatic Navigation:
You can also perform programmatic navigation in React Router using the useHistory hook or the withRouter higher-order component.
5)Nested Routes:
You can nest routes within components to create more complex navigation structures.
jsx
Copy code
// App.js
// …
// …
In the Products component, you can define additional routes in React Routing.
This is a basic introduction to React Router. Depending on your project requirements, you may need to explore more advanced features provided by React Router, such as route guarding, route transitions, and lazy loading. The official documentation is a valuable resource for further details and examples.
