React Router provides client-side routing for React applications, enabling navigation without page reloads. It uses components like BrowserRouter, Routes, Route, and Link, with hooks like useNavigate and useParams for programmatic navigation and accessing route parameters.
What is React Router:
Key Concepts (v7):
Router Types:
Core Components:
Key Hooks:
Advanced Features (v6.4+/v7):
import { BrowserRouter, Routes, Route, Link, NavLink } from 'react-router';
function App() {
return (
<BrowserRouter>
{/* Navigation */}
<nav>
<Link to="/">Home</Link>
{/* NavLink adds 'active' class when route matches */}
<NavLink
to="/about"
className={({ isActive }) => isActive ? 'active' : ''}
>
About
</NavLink>
<Link to="/users">Users</Link>
</nav>
{/* Route definitions */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/users" element={<Users />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}