🗺️ Bài 19: React Router - Điều Hướng Trang

npm install react-router-dom

import { BrowserRouter, Routes, Route, Link, NavLink } from 'react-router-dom';

function App() {
    return (
        <BrowserRouter>
            <nav>
                <NavLink to="/" className={({isActive}) => isActive ? 'active' : ''}>Home</NavLink>
                <NavLink to="/about">About</NavLink>
                <NavLink to="/users">Users</NavLink>
            </nav>

            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/users" element={<Users />} />
                <Route path="/users/:id" element={<UserDetail />} />
                <Route path="*" element={<NotFound />} />
            </Routes>
        </BrowserRouter>
    );
}

import { useParams, useNavigate, useSearchParams } from 'react-router-dom';

function UserDetail() {
    const { id } = useParams();
    const navigate = useNavigate();
    const [searchParams] = useSearchParams();
    const tab = searchParams.get('tab') || 'profile';

    return (
        <div>
            <h1>User #{id}</h1>
            <p>Tab: {tab}</p>
            <button onClick={() => navigate(-1)}>← Quay lại</button>
            <button onClick={() => navigate('/users')}>Danh sách</button>
        </div>
    );
}

import { Navigate, Outlet } from 'react-router-dom';

function ProtectedRoute({ isAuthenticated }) {
    if (!isAuthenticated) return <Navigate to="/login" replace />;
    return <Outlet />;
}

// Sử dụng
<Routes>
    <Route path="/login" element={<Login />} />
    <Route element={<ProtectedRoute isAuthenticated={user !== null} />}>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
    </Route>
</Routes>