React Router habilita roteamento no lado do cliente e layouts aninhados para aplicacoes SPA em React.
Configuração Básica de Rotas (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>
);
}
Links e Navegação (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 identifica automaticamente a rota ativa para aplicar estilos destacados:
Parâmetros Dinâmicos e Navegação Programática
Leitura de parametros com 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>;
}
Navegacao por codigo com 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>;
}
Rotas Aninhadas e Outlet
O componente <Outlet /> funciona como o ponto de saida onde as rotas filhas sao renderizadas:
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>