routing-navigation

What problem does it solve?

Client-side routing and navigation in React applications can be error-prone and repetitive, especially when setting up routes, linking between pages, guarding protected sections, and handling parameters and nested layouts.

Core Features & Use Cases

• Setup and configure React Router with BrowserRouter, Routes, and Route for declarative navigation.
• Implement navigation with Link and NavLink, and perform programmatic navigation using useNavigate.
• Access route parameters and query strings with useParams and useLocation/useSearchParams.
• Create protected routes with a wrapper component that redirects unauthenticated users to a login page while preserving the original destination.
• Support nested routes using Outlet to render child routes within a shared layout.

Quick Start

Wrap your app with BrowserRouter and define a protected '/dashboard' route that redirects to login when unauthenticated.