A lightweight and powerful client-side routing library for building Single Page Applications (SPA) with pure JavaScript.
Define routes, manage navigation, handle dynamic parameters, apply middleware, and create seamless page transitions without refreshing the browser.
- 🚀 Client-side SPA routing
- 🔗 Browser History API support
- 📄 Single and grouped routes
- 🔥 Dynamic route parameters
- 🛡 Route middleware system
- 🔀 Route redirection
- 🏷 Dynamic page titles
- ⚡ No page refresh navigation
- 🪶 Lightweight and dependency-free
- 🧩 Simple and expressive API
npm install @aref-shojaei/routeryarn add @aref-shojaei/routerCreate your app.js file:
import { Router, Route } from "@aref-shojaei/router";
// Configure browser environment
Router.configure({
window,
document
});
// Create routes
Route.add("/", () => "Home Page");
Route.group("/auth", () => {
Route.add("/login", () => "Login Page");
Route.add("/register", () => "Register Page");
});
// Dynamic routes
Route.add("/users/{id}", ({ params: { id } }) => {
return `User #${id}`;
});
// Start the router
Router.run();The router automatically intercepts internal links and updates the page without refreshing the browser.
<body>
<nav>
<a href="/">Home</a>
<a href="/auth/login">Login</a>
<a href="/auth/register">Register</a>
<a href="/users/10">User Profile</a>
</nav>
<div id="root"></div>
<script src="app.js"></script>
</body>User Click
|
|
Browser Event
|
|
Router Engine
|
|
Route Matching
|
|
Middleware
|
|
Component Rendering
|
|
DOM UpdateCreate simple routes:
Route.add("/", () => "Welcome Page");
Route.add("/about", () => "About Page");Organize related routes together.
Route.group("/auth", () => {
Route.add("/login", () => "Login Page");
Route.add("/register", () => "Register Page");
});Generated routes:
/auth/login
/auth/registerCapture values directly from the URL.
Route.add("/users/{id}", ({ params: { id } }) => {
return `User ID: ${id}`;
});Multiple parameters:
Route.add(
"/courses/{category}/{name}",
({ params: { category, name } }) => {
return `${category} / ${name}`;
}
);Middleware allows you to execute custom logic before rendering a route.
Common use cases:
- Authentication checks
- Logging
- Analytics
- Permissions
- Data preparation
Example:
const logger = () => {
console.log("[LOG] Route visited");
};
Route.add(
"/dashboard",
() => "Dashboard"
).middleware([logger]);Group middleware:
Route.group("/admin", () => {
Route.add("/users", () => "Users");
Route.add("/settings", () => "Settings");
}).middleware([logger]);Redirect users to another route.
Route.add("/login", () => "Login Page");
Route.add("/dashboard", () => {
return Route.redirect("/login");
});Change the browser tab title dynamically.
Route.add("/", () => "Home")
.title("My Awesome SPA");If no title is specified, the router uses the default document.title.
my-spa/
|
├── index.html
|
├── app.js
|
└── node_modules/Router can be used for:
- Single Page Applications (SPA)
- Dashboard interfaces
- Admin panels
- Personal websites
- Progressive Web Applications
- Educational projects to learn routing concepts
Traditional websites require a full page reload for every navigation.
With Router:
Traditional Website
Click Link
|
HTTP Request
|
Server Response
|
Reload Entire Page
SPA Router
Click Link
|
JavaScript Router
|
Change Route
|
Update DOMThis results in a faster and smoother user experience.
By studying this project, you can understand:
- Browser History API
- URL parsing
- Route matching algorithms
- Dynamic parameters
- Middleware patterns
- Event handling
- Client-side rendering
- SPA architecture
Aref Shojaei
- 📧 Email: arefshojaei82@gmail.com
- 🐙 GitHub: @ArefShojaei
If this project helps you understand SPA architecture and client-side routing, consider giving it a Star ⭐ on GitHub.
Your support helps the project grow.