07-navegation-router

v0.3.3TypeScript

A lightweight, modern, and powerful React routing library with declarative routing, dynamic parameters, lazy loading, and full browser history support

react router routing spa single-page-application navigation react-router client-side-routing declarative-routing dynamic-routes

0/weekUpdated 3 months agoMITUnpacked: 24.3 KB

Published by Carlos Caño Gómez

npm install 07-navegation-router

Repository Homepage npm

🚀 Navigation Router

![npm version](https://www.npmjs.com/package/07-navegation-router)
![npm downloads](https://www.npmjs.com/package/07-navegation-router)
![License](https://github.com/carloscg00/navegation-router/blob/main/LICENSE)
![CI](https://github.com/CarlosCG2000/React-Router/actions/workflows/ci.yml)
![GitHub Pages](https://carloscg2000.github.io/React-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

✨ Features

- 🎯 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

📦 Installation

``bash npm install 07-navegation-router`

`bash yarn add 07-navegation-router`

`bash pnpm add 07-navegation-router`

`� Documentation & Examples`

🌐 Full documentation and interactive examples are available on our GitHub Pages site:

`$3`

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

`�🚀 Quick Start`

`jsx import { Router, Route, Link } from "07-navegation-router";

function App() { return (


        Home
        About
        User Profile

); }

function Home() { return (


      Home Page

      Go to About


  );
}
function About() {
  return (
    

      About Page

      Back to Home
    

  );
}
function UserProfile({ routeParams }) {
  // Access route parameters
  return 
User Profile #{routeParams.id}
;
}
function NotFound() {
  return 
404 - Page Not Found
;
}


📖 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 install
Run development server

npm run dev
Build the library

npm run prepare
Run 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 Request

See 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 bypath-to-regexp` for advanced pattern matching
- Tested with Vitest and React Testing Library
- Compiled with SWC for blazing-fast builds

$3

- Midudev's YouTube Channel - Excellent React tutorials in Spanish
- Midudev's Courses - In-depth web development courses

🔄 Version History

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

🔗 Related Projects

- React Router - The most popular React routing library
- Wouter - Minimalist routing for React
- Reach Router - Accessible routing library

📊 Keywords

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

---

🌟 Ready to Get Started?

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! 🚀

🚀 Navigation Router

> 📚 View Full Documentation | Live Examples | API Reference

✨ Features

📦 Installation

``bash npm install 07-navegation-router`

`bash yarn add 07-navegation-router`

`bash pnpm add 07-navegation-router`

`� Documentation & Examples`

🌐 Full documentation and interactive examples are available on our GitHub Pages site:

`$3`

The documentation site includes:

`�🚀 Quick Start`

`jsx import { Router, Route, Link } from "07-navegation-router";

function App() { return (


        Home
        About
        User Profile

); }

function Home() { return (


      Home Page

      Go to About


  );
}
function About() {
  return (
    

      About Page

      Back to Home
    

  );
}
function UserProfile({ routeParams }) {
  // Access route parameters
  return 
User Profile #{routeParams.id}
;
}
function NotFound() {
  return 
404 - Page Not Found
;
}


📖 API Reference
$3
The main container component that enables routing in your application.

`jsx {/ Your routes go here /}`

Props:

`$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...