React Router

React Router is a library used in React to manage client-side routing by mapping URL paths to components without reloading the page.

• Client-Side Routing: Enables navigation without full page reloads.
• URL Mapping: Connects URL paths to specific components.
• Dynamic Navigation: Allows seamless switching between views.
• Improved Performance: Updates only required components instead of the whole page.

Types of React Routers

There are three types of routers in React:

1. BrowserRouter: The BrowserRouter is the most commonly used router for modern React applications. It uses the HTML5 History API to manage routing, which allows the URL to be dynamically updated while ensuring the browser's address bar and history are in sync.
2. HashRouter: The HashRouter is useful when you want to use a URL hash (#) for routing, rather than the HTML5 history API. It doesn't require server configuration and works even if the server doesn't support URL rewriting.
3. MemoryRouter: The MemoryRouter is used in non-browser environments, such as in React Native or when running tests.

Features

React Router provides flexible and efficient routing capabilities for React applications.

• Declarative Routing: Define routes using Routes and Route components.
• Nested Routes: Supports hierarchical routing structures.
• Programmatic Navigation: Use useNavigate for navigation control.
• Route Parameters: Enables dynamic routing with URL parameters.
• TypeScript Support: Provides better type safety and development experience.

Components

Here are the main components used in React Router:

1. BrowserRouter and HashRouter

• BrowserRouter: Uses the HTML5 history API to keep your UI in sync with the URL.
• HashRouter: Uses the hash portion of the URL (i.e., window.location.hash) to keep your UI in sync with the URL.

<BrowserRouter>
 {/* Your routes go here */}
</BrowserRouter>

2. Routes and Route

• Routes: A container for all your route definitions.
• Route: Defines a single route with a path and the component to render.

<Routes>
 <Route path="/" element={<Home />} />
 <Route path="/about" element={<About />} />
</Routes>

3. Link and NavLink

• Link: Creates navigational links in your application.
• NavLink: Similar to Link but provides additional styling attributes when the link is active.

<NavLink 
 to="/" 
 className={({ isActive }) => (isActive ? "active" : "")}
>
 Home
</NavLink>

Steps to Create Routes using React Router

Steps to Creating routes using React Router involves configuring navigation paths and linking them to components to enable dynamic page rendering within a React application.

Step 1: Initialize React Project

Run the following command to create a new React application:

npm create vite@latest react-router-example
cd react-router-example

Step 2: Install React Router

Install react-router in your application write the following command in your terminal

npm install react-router-dom@6

Project Structure

Dependencies list after installing react router

"dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "react": "^18.3.1",
 "react-dom": "^18.3.1",
 "react-router-dom": "^6.24.1",
 "web-vitals": "^2.1.4"
}

Example: This example demonstrates implementing basic routes in a React App.

Step 3: Run the application using the following command.

npm run dev

Output:

Uses of React Router

1. Navigation and Routing: React Router provides a declarative way to navigate between different views or pages in a React application. It allows users to switch between views without refreshing the entire page.
2. Dynamic Routing: React Router supports dynamic routing, which means routes can change based on the application's state or data, making it possible to handle complex navigation scenarios.
3. URL Management: React Router helps manage the URLs in your application, allowing for deep linking, bookmarkable URLs, and maintaining the browser's history stack.
4. Component-Based Approach: Routing is handled through components, making it easy to compose routes and navigation in a modular and reusable way.
5. Handling Nested Routes: React Router allows the creation of nested routes, which enables a more organized and structured approach to rendering content. This is particularly useful for larger applications with a complex structure.