@pedrovs3/react-router NPM

@pedrovs3/react-router

This is a simple, lightweight, and flexible routing library for React applications. It provides a set of components and hooks to handle routing in your application, including support for dynamic routes with parameters in the URL.

📝 Summary

@pedrovs3/react-router

About the project

This library was created to learn more about how a Router for React works and how to create a library for React. It was inspired by React Router and React Router Dom, however, it has a simpler and more flexible API. In addition, it is lighter and has no external dependencies.

Features and resources

Simple API: Just wrap your application with the Router component and use the Route component to define your routes.
Dynamic routes: Easily define routes with path parameters, such as "/user/:id". The Route component will automatically extract these parameters and pass them to your component.
Query Params: Access the query params of your components with the useRouterContext hook.
404 page: Define a custom 404 page that will be displayed when no route matches.
Guarded routes: Define routes that can only be accessed if the user is authenticated.
Hooks: It has hooks to access the navigation history and the router context.
Metadata: Define metadata for your routes, such as page title and description to improve SEO.
Lazy loading: Support for asynchronous loading of components.
TypeScript support: All components and hooks are fully typed.
Documentation: Complete documentation with usage examples.
Lightweight: No external dependencies.
Flexible: You can use it with any React project, such as Next.js, Gatsby, etc.
Tested: All components and hooks are tested with Jest and React Testing Library.
No external dependencies: No external dependencies.

Adjustments and improvements

The project is still under development and future updates will focus on the following tasks:

Add support for nested routes.
Add support for guarded routes.
Add support for route transitions.
Add support for route prefetching.
Add support for route preloading.

💻 Prerequisites

Before starting, make sure you have met the following requirements:

You have installed the latest version of Node.js and npm or yarn or pnpm.
You have a <Windows / Linux / Mac> machine.
You have created a React project with <create-react-app / Vite>.

🚀 Installing @pedrovs3/react-router

To install @pedrovs3/react-router, follow these steps:

NPM:

npm i @pedrovs3/react-router

YARN:

yarn add @pedrovs3/react-router

PNPM:

pnpm add @pedrovs3/react-router

☕ Using @pedrovs3/react-router

To use the router in your project, follow these steps:

1. Import the Router component and the Route component:

import { Router, Route } from '@pedrovs3/react-router';

2. Wrap your application with the Router component:

import { Router } from '@pedrovs3/react-router';

const App = () => (
  <div className="App">
    <Router>
      {/* Rotas */}
    </Router>
  </div>
);

3. Define your routes with the Route component:

import { Router, Route } from '@pedrovs3/react-router';

const App = () => (
  <div className="App">
    <Router>
      <Route path="/home" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/user/:id" component={User} />
    </Router>
  </div>
);

In the example above, the Home component will be rendered when the user accesses the /home route, the About

4. Using lazy loading:

4.1 Import the lazy function from React:

import { Router, Route } from '@pedrovs3/react-router';
import { lazy } from 'react';

4.2 Import the component you want to load asynchronously:

import { Router, Route } from '@pedrovs3/react-router';
import { lazy } from 'react';

// Example with lazy loading
const About = lazy(() => import('./About'));

4.3 Finally, pass the imported component to the Route component:

import { Router, Route } from '@pedrovs3/react-router';
import { lazy } from 'react';

// Example with lazy loading
const About = lazy(() => import('./About'));

const App = () => (
  <Router>
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/user/:id" component={User} />
  </Router>
);