react-impl-routing
Installation
SKILL.md
react-impl-routing
Quick Reference
Router Setup (React Router 6.4+)
| Concept | API | Purpose |
|---|---|---|
| Router creation | createBrowserRouter() |
Define route tree as object array |
| Router rendering | <RouterProvider router={router} /> |
Mount the data router in React |
| Nested rendering | <Outlet /> |
Render child route element inside parent layout |
| Navigation link | <Link to="/path"> |
Client-side navigation without reload |
| Active link | <NavLink className={({isActive}) => ...}> |
Link with active state styling |
| Programmatic nav | useNavigate() |
Navigate from event handlers or effects |
| URL params | useParams() |
Read dynamic route segments |
| Query strings | useSearchParams() |
Read and update URL search parameters |
| Loader data | useLoaderData() |
Access data returned by route loader |
| Action data | useActionData() |
Access data returned by route action |
| Error info | useRouteError() |
Access error thrown in loader/action/render |
Related skills