Advanced React Development

Chapter 8: React Router Advanced

8.1 Protected Routes

Protected routes restrict access based on authentication status or user permissions.

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

function ProtectedRoute({ isAuthenticated, redirectTo = '/login' }) {
    return isAuthenticated ? <Outlet /> : <Navigate to={redirectTo} replace />;
}

// Usage
<Routes>
    <Route path="/login" element={<Login />} />
    <Route element={<ProtectedRoute isAuthenticated={isAuth} />}>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/profile" element={<Profile />} />
    </Route>
</Routes>

8.2 Route Guards

function PrivateRoute({ children, requiredRole }) {
    const { user, isAuthenticated } = useAuth();
    
    if (!isAuthenticated) {
        return <Navigate to="/login" />;
    }
    
    if (requiredRole && user.role !== requiredRole) {
        return <Navigate to="/unauthorized" />;
    }
    
    return children;
}

8.3 Nested Routes

// Nested routing structure
<Routes>
    <Route path="/dashboard" element={<DashboardLayout />}>
        <Route index element={<DashboardHome />} />
        <Route path="settings" element={<Settings />} />
        <Route path="analytics" element={<Analytics />} />
    </Route>
</Routes>

// DashboardLayout component
function DashboardLayout() {
    return (
        <div>
            <Sidebar />
            <main>
                <Outlet /> {/* Renders nested routes */}
            </main>
        </div>
    );
}

8.4 Programmatic Navigation

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

function MyComponent() {
    const navigate = useNavigate();
    const location = useLocation();
    const params = useParams();
    
    const handleClick = () => {
        navigate('/dashboard', { 
            state: { from: location.pathname },
            replace: true 
        });
    };
    
    return <button onClick={handleClick}>Go to Dashboard</button>;
}