A professional React routing library with guards, loaders, and navigation blocking
npm install router-kitA professional React routing library with guards, loaders, loading components, middlewares, and navigation blocking.
Version: 2.1.0 | License: MIT
---
- 🛡️ Route Guards - Authentication & authorization
- 📦 Data Loaders - Pre-fetch route data
- 🚫 Navigation Blocking - Protect unsaved changes
- 📜 Scroll Restoration - Auto scroll management
- ⚡ Lazy Loading - Code splitting support
- 🎯 TypeScript - Full type safety
- 🎭 Outlet - Professional nested layouts
- 🪝 10 Hooks - Complete routing control
---
``bash`
npm install router-kit
---
`tsx
import {
createRouter,
RouterProvider,
Link,
useNavigate,
useParams,
} from "router-kit";
const Home = () =>
const routes = createRouter([
{ path: "/", component:
{ path: "users/:id", component:
{ path: "/404", component:
function App() {
return
}
`
`tsx
import { Router, Route, Link } from "router-kit";
function App() {
return (
);
}
`
---
`tsx
const authGuard = async () => {
const isAuth = await checkAuth();
return isAuth || "/login";
};
const routes = createRouter([
{
path: "dashboard",
component:
guard: authGuard,
},
]);
`
---
`tsx/api/users/${params.id}
const routes = createRouter([
{
path: "users/:id",
component:
loader: async ({ params }) => {
return fetch().then((r) => r.json());
},
},
]);
function UserProfile() {
const user = useLoaderData();
return
---
🪝 Hooks
tsx
const navigate = useNavigate(); // Navigation
const { id } = useParams(); // Route params
const { page } = useQuery(); // Query params
const location = useLocation(); // Location object
const matches = useMatches(); // Route matches
const data = useLoaderData(); // Loader data
const blocker = useBlocker(isDirty); // Block navigation
const outlet = useOutlet(); // Child route element
const ctx = useOutletContext(); // Outlet context
`---
🎭 Outlet (Nested Layouts)
tsx
import { useState } from "react";
import { Outlet, useOutletContext } from "router-kit";// Parent layout with Outlet
function DashboardLayout() {
const [user] = useState({ name: "John" });
return (
);
}// Child route accesses context
function Settings() {
const { user, theme } = useOutletContext<{ user: User; theme: string }>();
return
Settings for {user.name};
}
`$3
tsx
const routes = createRouter([
{
path: "dashboard",
component:
children: [
{ index: true, component:
{ path: "settings", component:
{ path: "profile", component:
],
},
]);
`$3
tsx
``---
| Document | Description |
| ---------------------------------------- | ----------------- |
| Documentation | Complete guide |
| API Reference | Full API docs |
| Architecture | Technical details |
| Changelog | Version history |
---
- GitHub: github.com/Mohammed-Ben-Cheikh/router-kit
- Author: Mohammed Ben Cheikh
---
Made with ❤️ by Mohammed Ben Cheikh