https://github.com/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 path parameters.
https://github.com/pedrovs3/react-router
library open-source react react-router router typescript
Last synced: about 1 year ago
JSON representation
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 path parameters.
- Host: GitHub
- URL: https://github.com/pedrovs3/react-router
- Owner: pedrovs3
- License: mit
- Created: 2023-12-14T14:52:35.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-28T12:13:07.000Z (over 2 years ago)
- Last Synced: 2025-01-28T18:39:10.940Z (over 1 year ago)
- Topics: library, open-source, react, react-router, router, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@pedrovs3/react-router
- Size: 408 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README-PT.md
- Contributing: CONTRIBUTING-PT.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# @pedrovs3/react-router
Veja em outra língua:
[](https://github.com/pedrovs3/react-router/blob/main/README.md)
> Esta é uma biblioteca de roteamento simples, leve e flexível para aplicações React. Ela fornece um conjunto de
componentes e hooks para lidar com o roteamento em sua aplicação, incluindo suporte para rotas dinâmicas com parâmetros
na URL.
## 📝 Índice
* [@pedrovs3/react-router](#pedrovs3react-router)
* [📝 Índice](#-índice)
* [Sobre o projeto](#sobre-o-projeto)
* [Funcionalidades e recursos](#funcionalidades-e-recursos)
* [Ajustes e melhorias](#ajustes-e-melhorias)
* [💻 Pré-requisitos](#-pré-requisitos)
* [🚀 Instalando @pedrovs3/react-router](#-instalando-pedrovs3react-router)
* [☕ Usando @pedrovs3/react-router](#-usando-pedrovs3react-router)
* [📫 Contribuindo](#-contribuindo)
* [🤝 Colaboradores](#-colaboradores)
* [😄 Seja um dos contribuidores](#-seja-um-dos-contribuidores)
* [📝 Licença](#-licença)
## Sobre o projeto
Essa biblioteca foi criada para aprender mais sobre o funcionamento de um Router para React e como criar uma
biblioteca para React. Ela foi inspirada no React Router e no React Router Dom, porém, possui uma API mais simples e
flexível. Além disso, ela é mais leve e não possui dependencias externas.
### Funcionalidades e recursos
- [x] **API Simples**: Basta envolver a sua aplicação com o componente `Router` e usar o componente `Route` para definir as suas
rotas.
- [x] **Rotas Dinâmicas**: Defina facilmente rotas com parâmetros de caminho, como "/user/:id". O componente `Route`
extrairá automaticamente esses parâmetros e os passará para o seu componente.
- [x] **Query Params**: Acesse os query params de seus componentes com o hook `useRouterContext`.
- [x] **Página 404**: Defina uma página 404 personalizada que será exibida quando nenhuma rota corresponder.
- [x] **Guarded routes**: Defina rotas que só podem ser acessadas se o usuário estiver autenticado.
- [x] **Hooks**: Possui hooks para acessar o histórico de navegação e o contexto do roteador.
- [x] **Metadata**: Defina metadados para suas rotas, como, por exemplo, título da página e descrição para melhorar o `SEO`.
- [x] **Lazy loading**: Suporte para carregamento assíncrono de componentes.
- [x] **Suporte ao TypeScript**: Todos os componentes e hooks são totalmente tipados.
- [x] **Documentação**: Documentação completa com exemplos de uso.
- [x] **Testes**: Testes unitários e de integração.
- [x] **Tamanho**: Tamanho menor do que outras libs.
- [x] **Sem dependências**: Não possui dependências externas.
- [x] **Compatibilidade**: Compatível com React 16.8.0 ou superior.
### Ajustes e melhorias
O projeto ainda está em desenvolvimento e as próximas atualizações serão voltadas nas seguintes tarefas:
- [x] Otimização do código
- [x] Melhorar a documentação
- [ ] Adicionar mais exemplos de uso
- [ ] Testar implementação com Next.js
## 💻 Pré-requisitos
Antes de começar, verifique se você atendeu aos seguintes requisitos:
- Você instalou a versão mais recente de ``
- Você tem uma máquina ``.
- Você criou um projeto React com ``.
## 🚀 Instalando @pedrovs3/react-router
Para instalar o react-router, siga estas etapas:
**NPM**:
```
npm i @pedrovs3/react-router
```
**YARN**:
```
yarn add @pedrovs3/react-router
```
**PNPM**:
```
pnpm add @pedrovs3/react-router
```
## ☕ Usando @pedrovs3/react-router
Para usar o router no seu projeto, siga estas etapas:
**1.** Importe o componente `Router` e o componente `Route`:
```typescriptreact
import { Router, Route } from '@pedrovs3/react-router';
```
**2.** Envolva a sua aplicação com o componente `Router`:
```typescriptreact
import { Router } from '@pedrovs3/react-router';
const App = () => (
{/* Rotas */}
);
```
**3.** Defina as suas rotas com o componente `Route`:
```typescriptreact
import { Router, Route } from '@pedrovs3/react-router';
const App = () => (
);
```
> Neste exemplo, `Home`, `About` e `User` são seus componentes. O componente `User` receberá uma prop `pathParams` com
o ‘id’ da URL.
**4.** Utilizando lazy loading:
**4.1** Importe `lazy` do React:
```typescriptreact
import { Router, Route } from '@pedrovs3/react-router';
import { lazy } from 'react';
```
**4.2** Importe o componente que você deseja carregar de forma assíncrona:
```typescriptreact
import { Router, Route } from '@pedrovs3/react-router';
import { lazy } from 'react';
// Example with lazy loading
const About = lazy(() => import('./About'));
```
**4.3** Por fim, passe o componente importado para o componente `Route`:
```typescriptreact
import { Router, Route } from '@pedrovs3/react-router';
import { lazy } from 'react';
// Example with lazy loading
const About = lazy(() => import('./About'));
const App = () => (
);
```
> O router cuida de todo o resto, como, por exemplo, carregar o componente de forma assíncrona e passar os parâmetros da
URL para o componente.
## 📫 Contribuindo
Para contribuir com o projeto, siga estas etapas:
1. Bifurque este repositório.
2. Crie um branch: `git checkout -b `.
3. Faça as suas alterações e confirme-as: `git commit -m ''`
4. Envie para o branch original: `git push origin / `
5. Crie a solicitação de pull.
Como alternativa, consulte a documentação do GitHub em [como criar uma solicitação pull](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request).
## 🤝 Colaboradores
Agradecemos às seguintes pessoas que contribuíram para este projeto:
## 😄 Seja um dos contribuidores
Quer fazer parte desse projeto? Clique [AQUI](CONTRIBUTING.md) e leia como contribuir.
## 📝 Licença
Esse projeto está sob licença MIT. Veja o arquivo [LICENÇA](LICENSE) para mais detalhes.
[⬆ Voltar ao topo](#pedrovs3react-router)
