React Router
React Router is a library for handling routing and navigation in React JS Applications. It allows you to create dynamic routes, providing a seamless user experience by mapping various URLs to components. It enables navigation in a single-page application (SPA) without refreshing the entire page.
This article will walk you through the basics of React Router, its features, the installation process, and how to implement routing in a React application.
React Router
What is React Router?
React Router is a standard library for creating dynamic routes and navigation in React JS Applications. It allows you to manage navigation in your app by defining routes that connect the URL paths to specific components.
With React Router, you can implement different views for different parts of your application without the need for a full-page refresh. This is a key feature of single-page applications (SPAs), where only the necessary content is updated as the user navigates.
The current latest verstion is React router dom v6.
Features of React Router
- Declarative Routing: React Router v6 uses the
RoutesandRoutecomponents to define routes declaratively, making the routing configuration simple and easy to read. - Nested Routes: It supports nested routes, allowing for complex and hierarchical routing structures, which helps in organizing the application better.
- Programmatic Navigation: The
useNavigatehook enables programmatic navigation, allowing developers to navigate between routes based on certain conditions or user actions. - Route Parameters: It provides dynamic routing with route parameters, enabling the creation of routes that can match multiple URL patterns.
- Improved TypeScript Support: Enhanced TypeScript support ensures that developers can build type-safe applications, improving development efficiency and reducing errors.
Components of React Router
React Router mainly comprises of the below components
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
Linkbut provides additional styling attributes when the link is active.
<nav>
<NavLink to="/" activeClassName="active">Home</NavLink>
<Link to="/about">About</Link>
</nav>
Steps to Create Routes using React Router
Step 1: Initialize React Project
Create React application using the following command.
npx create-react-app 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@6Project Structure
Folder Structure
Depenedencies 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",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: This example demonstrates implemeting basic routes in a React App.
/* src/index.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
h2 {
text-align: center;
color: #333;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
nav li {
margin: 0 10px;
}
nav a {
text-decoration: none;
color: #333;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
// src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// src/App.js
import React from "react";
import {
BrowserRouter as Router,
Routes,
Route,
Link,
useNavigate,
Outlet,
} from "react-router-dom";
// Home Page Component
const Home = () => {
const navigate = useNavigate();
return (
<div>
<h2>Home Page</h2>
<button onClick={() =>
navigate("/contact")}>Go to Contact</button>
</div>
);
};
// About Page Component
const About = () => (
<div>
<h2>About Page</h2>
<nav>
<ul>
<li>
<Link to="team">Our Team</Link>
</li>
<li>
<Link to="company">Our Company</Link>
</li>
</ul>
</nav>
<Outlet />
</div>
);
// Components for other pages
const Contact = () => <h2>Contact Page</h2>;
const Team = () => <h2>Team Page</h2>;
const Company = () => <h2>Company Page</h2>;
function App() {
return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
{/*Implementing Routes for respective Path */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />}>
<Route path="team" element={<Team />} />
<Route path="company" element={<Company />} />
</Route>
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
}
export default App;
Step 4: Run the application using the following command.
npm startOutput:
React Router
Uses of React Router
- 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.
- 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.
- URL Management: React Router helps manage the URLs in your application, allowing for deep linking, bookmarkable URLs, and maintaining the browser’s history stack.
- Component-Based Approach: Routing is handled through components, making it easy to compose routes and navigation in a modular and reusable way.
React Router – FAQ’s
How do you install React Router?
To install react router use this npm command: npm install react-router-dom.
What is the difference between BrowserRouter and HashRouter?
BrowserRouter uses the HTML5 history API, while HashRouter uses the URL hash.
How to pass parameters in React Router?
Use URL parameters in the route path, e.g., path=”/user/:id”.
How do you navigate programmatically?
Use the useNavigate hook or history.push().
What is Link in React Router?
Link is a component for navigating without full page reloads.
What is NavLink?
NavLink is similar to Link but provides active link styling.
How to handle redirects in React Router?
Use the Navigate component within Routes.
How to create nested routes?
Use nested <Route> components within a parent <Route> in Routes.
What is useParams in React Router?
useParams is a hook that returns route parameters from the URL.
