A lightweight, modern, and powerful React routing library with declarative routing, dynamic parameters, lazy loading, and full browser history support
npm install 07-navegation-router




A lightweight, modern, and powerful React routing library built from scratch. Create single-page applications (SPAs) with declarative routing, dynamic parameters, lazy loading, and full browser history support.
> π View Full Documentation | Live Examples | API Reference
- π― Declarative Routing - Define routes with intuitive , , and components
- π Dynamic Parameters - Support for route parameters using path-to-regexp
- β‘ Lazy Loading - Code-split your routes for optimal performance
- π Browser History - Full support for browser back/forward navigation
- π¨ 404 Handling - Built-in support for default/fallback routes
- π‘οΈ Error Boundaries - Graceful error handling with RouterErrorBoundary
- π§ͺ Well Tested - 28 comprehensive tests with Vitest and Testing Library
- π¦ Lightweight - Only 5.9 kB (gzipped) with minimal dependencies
- π§ TypeScript Support - Full TypeScript definitions included
- π JSDoc Comments - Complete inline documentation
- π Production Ready - Battle-tested and optimized for performance
- π i18n Support - Internationalization-friendly routing patterns
``bash`
npm install 07-navegation-router
`bash`
yarn add 07-navegation-router
`bash`
pnpm add 07-navegation-router
π Full documentation and interactive examples are available on our GitHub Pages site:
The documentation site includes:
- π Complete API Documentation - Detailed guides for all components
- π» Interactive Examples - Try the router live in your browser
- π― Basic Routing Example - Get started quickly
- π Dynamic Routes Example - Learn parameter handling
- π‘οΈ Error Handling Example - Robust error boundary patterns
- β‘ Performance Benchmarks - See how fast the router is
- π TypeScript Support - Full type definitions and examples
`jsx
import { Router, Route, Link } from "07-navegation-router";
function App() {
return (
);
}
function Home() {
return (
function About() {
return (
function UserProfile({ routeParams }) {
// Access route parameters
return
function NotFound() {
return
π API Reference
$3
The main container component that enables routing in your application.
`jsx
{/ Your routes go here /}
`Props:
-
defaultComponent (React.Component, optional): Component to render when no route matches (404 handler)
- routes (Array, optional): Array of route objects for programmatic routing
- children (React.Node): Route components$3
Defines a route with a specific path and component to render.
Props:
-
path (string): The URL path pattern (supports parameters like /users/:id)
- Component (React.Component): The component to render when the path matches`jsx
`Route Parameters:
The matched component receives
routeParams as a prop:`jsx
function ProductDetail({ routeParams }) {
const { id } = routeParams;
return Product {id}
;
}
`$3
Declarative navigation component for client-side routing without page reloads.
Props:
-
to (string): The destination path
- target (string, optional): Link target attribute (e.g., _blank)
- Any other props are passed to the underlying element`jsx
About Us
Documentation
Contact
`$3
Programmatic navigation function for imperatively changing routes.
`jsx
import { navigate } from "07-navegation-router";function handleLogin() {
// Perform login logic
navigate("/dashboard");
}
`$3
Error boundary component for catching and handling routing errors gracefully.
Props:
-
fallback (React.Component | React.Element, optional): Custom error fallback UI
- children (React.Node): Components to wrap`jsx
import { Router, Route, RouterErrorBoundary } from "07-navegation-router";function App() {
return (
}>
);
}
function ErrorPage({ error, resetError }) {
return (
Something went wrong
{error.message}
);
}
`π― Advanced Usage
$3
Access route parameters in your components:
`jsx
import { Router, Route, Link } from "07-navegation-router";function App() {
return (
);
}
function BlogPost({ routeParams }) {
const { slug } = routeParams;
return Post: {slug} ;
}
function UserPost({ routeParams }) {
const { userId, postId } = routeParams;
return (
User {userId}, Post {postId}
);
}
`$3
Improve performance by code-splitting your routes:
`jsx
import { lazy, Suspense } from "react";const Dashboard = lazy(() => import("./pages/Dashboard"));
function App() {
return (
Loading...
$3
Define a default route for unmatched paths:
`jsx
`$3
Use the
navigate function for imperative routing:`jsx
import { navigate } from "07-navegation-router";function LoginForm() {
const handleSubmit = async (e) => {
e.preventDefault();
const success = await login();
if (success) {
navigate("/dashboard");
window.scrollTo(0, 0); // Optional: scroll to top
}
};
return
;
}// Navigate with state
function goToProfile() {
navigate("/profile");
// The navigation event is automatically dispatched
}
`$3
Protect your routes with error boundaries:
`jsx
import { RouterErrorBoundary, Router, Route } from "07-navegation-router";function App() {
return (
fallback={({ error, resetError }) => (
Oops! Something went wrong
Error details
{error.message}
)}
>
);
}
`$3
Full TypeScript definitions are included:
`typescript
import {
Router,
Route,
Link,
navigate,
RouterErrorBoundary,
} from "07-navegation-router";
import type { RouteParams, RouteComponentProps } from "07-navegation-router";interface UserProfileProps extends RouteComponentProps {
routeParams: {
id: string;
};
}
const UserProfile: React.FC = ({ routeParams }) => {
return User {routeParams.id}
;
};
// Type-safe navigation
navigate("/users/123");
`ποΈ Project Structure
`
navegation-router/
βββ src/
β βββ components/
β β βββ Router.jsx # Main router component
β β βββ Route.jsx # Route definition component
β β βββ Link.jsx # Navigation link component
β β βββ ErrorBoundary.jsx # Error boundary component
β β βββ Router.test.jsx # Router tests (13 tests)
β β βββ Link.test.jsx # Link tests (10 tests)
β β βββ Route.test.jsx # Route tests (5 tests)
β βββ utils/
β β βββ consts.js # Constants
β β βββ getCurrentPath.js # Path utility
β β βββ navigation.js # Navigation utilities
β βββ index.jsx # Main entry point
β βββ navigation.js # Navigation exports
βββ lib/ # Compiled output (published to npm)
βββ docs/ # Documentation site
βββ examples/ # Interactive examples
βββ benchmarks/ # Performance benchmarks
βββ .github/workflows/ # CI/CD pipelines
β βββ ci.yml # Test & lint automation
β βββ pages.yml # GitHub Pages deployment
βββ package.json
βββ LICENSE # MIT License
βββ CHANGELOG.md # Version history
βββ CONTRIBUTING.md # Contribution guidelines
βββ README.md
`π§ͺ Testing
This library is thoroughly tested using:
- Vitest - Fast unit test framework
- Happy DOM - Lightweight DOM implementation
- Testing Library - React component testing utilities
Test Coverage:
- β
28 tests passing
- β
Router component (13 tests)
- β
Link component (10 tests)
- β
Route component (5 tests)
`bash
npm run test # Run tests once
npm run test:watch # Watch mode
npm run test:ui # UI mode
npm run bench # Run performance benchmarks
`π Performance
Benchmarks show excellent performance:
- Route Matching: ~0.05ms per route
- Bundle Size: 5.9 kB gzipped
- Tree-shakeable: Import only what you need
Run benchmarks yourself:
`bash
npm run bench
`π οΈ Development
`bash
Install dependencies
npm installRun development server
npm run devBuild the library
npm run prepareRun tests
npm run test
`π Browser Support
- β
Chrome (latest)
- β
Firefox (latest)
- β
Safari (latest)
- β
Edge (latest)
π€ Contributing
Contributions are welcome! Please read our Contributing Guidelines before submitting a Pull Request.
1. Fork the repository
2. Create your feature branch (
git checkout -b feature/AmazingFeature)
3. Write tests for your changes
4. Ensure all tests pass (npm test)
5. Commit your changes (git commit -m 'Add some AmazingFeature')
6. Push to the branch (git push origin feature/AmazingFeature)
7. Open a Pull RequestSee CONTRIBUTING.md for detailed guidelines.
π License
This project is licensed under the MIT License - see the LICENSE file for details.
π¨βπ» Author
Carlos CaΓ±o GΓ³mez
- GitHub: @CarlosCG2000
- npm: 07-navegation-router
π Resources & Links
$3
- π Official Documentation Site - Complete guides and API reference
- π» Interactive Examples - Try the router in your browser
- οΏ½ Changelog - Version history and updates
$3
- π¦ npm Package - Install from npm registry
- οΏ½ GitHub Repository - Source code
$3
- οΏ½π Report Issues - Bug reports and feature requests
- π‘ Contributing Guide - How to contribute
- β Star on GitHub - Show your support!
$3
- β
CI Pipeline - Automated testing
- π Pages Deployment - Documentation site status
π Acknowledgments
- Special thanks to Midudev for his invaluable educational content and didactic approach to teaching React and modern web development. His tutorials and courses were a significant inspiration for this project.
- Inspired by React Router and modern routing libraries
- Built with modern React best practices and hooks
- Powered by
path-to-regexp` for advanced pattern matching- Midudev's YouTube Channel - Excellent React tutorials in Spanish
- Midudev's Courses - In-depth web development courses
See CHANGELOG.md for a detailed version history.
Latest Release: v0.3.1
- β
TypeScript definitions
- β
Error boundary support
- β
28 comprehensive tests
- β
Performance benchmarks
- β
Interactive examples
- β
CI/CD automation
- React Router - The most popular React routing library
- Wouter - Minimalist routing for React
- Reach Router - Accessible routing library
react, router, routing, spa, single-page-application, navigation, react-router, client-side-routing, declarative-routing, dynamic-routes, lazy-loading, history-api, browser-history, lightweight-router, minimal-router
---
Visit our Documentation Site for:
- π Complete guides and tutorials
- π» Live, interactive examples you can try in your browser
- π― Step-by-step implementation guides
- π‘οΈ Best practices and patterns
- β‘ Performance optimization tips
Made with β€οΈ by Carlos CaΓ±o GΓ³mez
If you find this project useful, please consider:
- β Starring the GitHub Repository
- π’ Sharing it with other developers
- π Reporting issues to help improve it
- π€ Contributing to the project
Happy routing! π