React Router: A Guide to Navigation and Dynamic Routing
Introduction to React Router
React Router is a popular library used for adding navigation and routing capabilities to React applications. It allows you to:
- Create single-page applications (SPAs).
- Navigate between pages without reloading.
- Dynamically load content based on the URL.
Installing and Setting Up React Router
Installation
To use React Router, install the library via npm or yarn:
npm install react-router-dom
Or, if you use yarn:
yarn add react-router-dom
Setting Up React Router
- Import
BrowserRouterand wrap your app with it. - Define your routes using
RoutesandRoute.
Basic Setup Example
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function Home() {
return <h1>Home Page</h1>;
}
function About() {
return <h1>About Page</h1>;
}
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
export default App;
Explanation:
BrowserRoutermanages the history and URL.Routesis a container for all yourRoutecomponents.Routemaps a URL path to a specific component.
Navigating Between Pages
React Router provides the Link and NavLink components for navigation.
Using the Link Component
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<Link to="/">Home</Link> | <Link to="/about">About</Link>
</nav>
);
}
Using the NavLink Component
The NavLink adds styling to indicate the active link.
import { NavLink } from 'react-router-dom';
function Navbar() {
return (
<nav>
<NavLink to="/" activeClassName="active">
Home
</NavLink>{' '}
|{' '}
<NavLink to="/about" activeClassName="active">
About
</NavLink>
</nav>
);
}
Example with Navbar
function App() {
return (
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
Dynamic Routing
Dynamic routing is useful for creating routes with parameters, such as user profiles or product details.
Defining a Dynamic Route
Use the : syntax to define a dynamic segment in the path.
function Product({ params }) {
const { id } = params;
return <h1>Product ID: {id}</h1>;
}
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/product/:id" element={<Product />} />
</Routes>
</BrowserRouter>
);
}
Accessing Route Parameters
React Router’s useParams hook retrieves the dynamic values.
import { useParams } from 'react-router-dom';
function Product() {
const { id } = useParams();
return <h1>Product ID: {id}</h1>;
}
Example: Dynamic Product List
import React from 'react';
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';
function ProductList() {
const products = [
{ id: 1, name: 'Product A' },
{ id: 2, name: 'Product B' },
];
return (
<ul>
{products.map((product) => (
<li key={product.id}>
<Link to={`/product/${product.id}`}>{product.name}</Link>
</li>
))}
</ul>
);
}
function Product() {
const { id } = useParams();
return <h1>Details for Product ID: {id}</h1>;
}
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<ProductList />} />
<Route path="/product/:id" element={<Product />} />
</Routes>
</BrowserRouter>
);
}
export default App;
Best Practices for React Router
- Use
NavLinkfor Navigation: Highlight active links for better UX. - Organize Routes: Use separate components or files for routes in larger apps.
- Lazy Load Components: For performance, load components dynamically using
React.lazyandSuspense. - Fallback Route: Use a wildcard (
*) route to handle undefined paths.
<Route path="*" element={<NotFound />} />
- SEO Considerations: Ensure proper meta tags and server-side rendering for better SEO.
