React Router gestisce il routing lato client, le transizioni di vista e i layout nidificati nelle SPA con React.
Configurazione Base delle Rotte (React Router v6+)
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}
Link e Navigazione (Link vs NavLink)
import { Link, NavLink } from 'react-router-dom';
// Standard declarative navigation link
<Link to="/about">About Us</Link>
// NavLink with active styling
<NavLink
to="/dashboard"
className={({ isActive }) => (isActive ? 'active-link' : 'normal-link')}
>
Dashboard
</NavLink>
NavLink rileva automaticamente la rotta attiva per applicare classi di stile:
Parametri Dinamici e Navigazione Programmatica
Estrazione parametri URL con useParams
// Route definition: <Route path="/users/:userId" element={<UserProfile />} />
import { useParams } from 'react-router-dom';
export function UserProfile() {
const { userId } = useParams();
return <h2>Viewing Profile: {userId}</h2>;
}
Navigazione via codice con useNavigate
import { useNavigate } from 'react-router-dom';
export function LoginForm() {
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
await loginUser();
// Programmatic redirect after successful login
navigate('/dashboard', { replace: true });
};
return <form onSubmit={handleSubmit}>...</form>;
}
Rotte Nidificate e Outlet
Il componente <Outlet /> funge da segnaposto in cui vengono renderizzate le route figlie:
import { Routes, Route, Outlet } from 'react-router-dom';
function Layout() {
return (
<div className="app-container">
<nav>Sidebar Navigation</nav>
<main>
{/* Child route matches render here */}
<Outlet />
</main>
</div>
);
}
// Router structure:
<Routes>
<Route path="/admin" element={<Layout />}>
<Route index element={<AdminDashboard />} />
<Route path="settings" element={<AdminSettings />} />
</Route>
</Routes>