React-Router-DOM

React Router DOM is an npm package that enables you to implement dynamic routing in a web app. It allows you to display pages and allow users to navigate them. It is a fully-featured client and server-side routing library for React. 

• Used to build single-page applications with multiple components or views.
• Updates content dynamically based on the URL without refreshing the page.
• This process is called routing and is handled using React Router DOM.

Functionality of React Router DOM

React Router DOM helps React apps navigate between pages without reloading. It makes switching pages easy and organizes the app with clear routes. Here are some benefits of using React Router Dom :

• Seamless Navigation: Allows users to navigate between pages without refreshing the entire application.
• Dynamic Routing: Dynamic routes support parameters, where the content can be customized by the input from the user.
• URL-Based Rendering: Dynamically renders components based on the current URL.
• Nested Routes: This allows for the definition of routes inside routes, thus complex layouts can easily be achieved.

Components of React Router DOM

These components help in defining routes, handling navigation, and managing dynamic content within a React application.

BrowserRouter (<BrowserRouter>)

• BrowserRouter Enables routing in a React application by wrapping the entire app.
• It listens to changes in the URL and renders the correct components accordingly.

Routes (<Routes>)

• Routes acts as a container for all <Route> components.
• Ensures that only one matching route is rendered at a time.

Route (<Route>)

• Route defines a specific path and maps it to a React component.
• When the URL matches the route path, the respective component is displayed.

Link (<Link>)

• Used to navigate between pages without refreshing the page.
• Unlike <a>, it prevents full-page reloads and enhances performance.

NavLink (<NavLink>)

• Works like <Link> but provides active styling when the route is active.
• Useful for highlighting the active page in navigation menus.

useParams (useParams())

• useParams extracts dynamic parameters from the URL.
• Helps in fetching user-specific or product-specific details based on the route.

useNavigate (useNavigate())

• useNavigate Allows programmatic navigation between routes.
• Useful for redirecting users after an action, such as form submission.

Working

React Router DOM allows for the transition through the entirety of the React application by setting multiple routes and page transitions without page reloading. This is the overall structure for how this is achieved:

Setting Up the Router: The entire app is wrapped around <BrowserRouter>, which allows for routing throughout the application.

Defining Routes: Multiple pages or components are assigned provided paths using <Routes> and <Route>, where the right content is displayed when you visit the URL.

Navigating Between Pages: Instead of the traditional <a> tag, React incorporates the use of <Link> or <NavLink> for navigating, providing for non-page refresh transitions.

Rendering Components Dynamically: When a user visits a specific URL, React Router checks for a matching route and displays the assigned component.

Using Nested Routes: Routes can be structured inside other routes, making it easier to manage layouts for complex apps.

Handling Dynamic Routes: Some routes accept parameters, allowing content to change based on user input. The useParams hook retrieves these values.

<Route path="/user/:id" element={<UserProfile />} />

Steps to Implement React-router-dom

To implement React Router DOM for navigation in a React application. Follow these steps:

Step 1: Install React Router DOM

Before using React Router DOM, install it in your project using:

npm install react-router-dom

Updated dependencies:

"dependencies": {
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-router-dom": "^6.22.3",
 "react-scripts": "5.0.1"
}

Step 2: Import Required Components

Import the necessary components inside App.js:

Step 3: Create Components for Different Pages

Define components that represent different pages:

Step 4: Set Up Router and Define Routes

Wrap your app with <Router> and use <Routes> to define different paths:

Step 5: Navigation Using <Link>

Use <Link> instead of <a> to enable navigation without refreshing:

Output:

• App.js: Sets up routing using <BrowserRouter>, defines routes with <Routes> and <Route>, and includes navigation using <Link>.
• Home.js: A simple React component that renders a heading (GeeksforGeeks). It is displayed when the user visits /.
• About.js: Displays "Geeks Learning" and is rendered when the user navigates to /about.
• Contact.js: Shows "Geeks Contact Page" when the user visits /contact.