ragic v0.2.0
Ragic
Introdução
Ragic (Routing Magic, ou "a mágica do roteamento") é uma biblioteca de roteamento de aplicações em React com funcionamento similar ao da biblioteca ReactRouterDom, com a diferença de que ela é feita com foco especial em melhorar a experiência do usuário programador na escrita do código e no gerenciamento de suas rotas.
Isso se dá por meio de um relacionamento entre o componente da página, o nome da rota e os apelidos da própria, que permite uma centralização do controle das rotas, onde os apelidos podem ser renomeados e reaproveitados nos outros arquivos que os usem dentro de um mesmo projeto.
Instalação
npm i ragic
or
yarn add ragic
Definição das rotas
A definição de rotas é feita em um arquivo routes.ts à parte a ser importado no app. Além de construir as rotas principais, é possível construir rotas 'apelidos' que encaminham para uma rota anteriormente definida, e também rotas 'filhas' de outras rotas
Rotas básicas
.path('/nomeDaRota', component:{NomeDoComponenteDaRota})
Rotas apelido
.path('/nomeDaRota', component:{NomeDoComponenteDaRota})
.path('/outroNome', link_to: {'/nomeDaRota'})
Rotas flihas
.path('/blog', {
component: Blog,
children: path('/page', {component: BlogPage})
.path('/new', {component: CreateBlog}),
})
Nesse caso, ambas as rotas '/blog/page' e '/blog/new' são definidas.
Usando parâmetros
Ragic traz junto a possibilidade de usar parâmetros recebidos da url em seus componentes, ou fazendo o caminho inverso, passar para uma rota uma variável do componente.
Usar parâmetros na rota
const pageNumber = "4"
...
<Link to="/blog/:blog_id" params={{ blog_id: pageNumber}}>
Ir para página {pageNumber}
</Link>
Usar parâmetros da rota no componente
import { useRouteParams } from "../routes"
...
const { blog_id } = useRouteParams("/blog/:blog_id")
...
<h1> Este é a página {blog_id} </h1>
Exemplo de uso
// routes.ts
import { createRoutes, UseRoutes } from 'ragic';
export const routes = createRoutes()
.path('/', { component: HomePage })
.path('/home', {link_to: '/'})
.path('/blog', {
component: BlogListPage,
children: path('/:blog_id', {component: ViewBlogPostPage})
.path('/new', {component: CreateBlogPostPage}),
})
.path('/about-us', { component: AboutUsPage });
export const { Link, Router, useRouteParams } = UseRoutes(routes)
Criação do Roteador
// app.ts
import { Router } from './routes.ts';
export const App = () => {
return <Router />;
};
Link para uma rota
// pages/example-page.ts
import { Link } from '../routes.ts';
export const ExamplePage = () => {
const {blog_id}
return (
<div>
<h1>Page Title</h1>
<p>
To find out more about us, <Link to="/about-us">click here</Link>.
</p>
<p>
To go to the blogpost of id 23,{' '}
<Link to="/blog/:blog_id" params={{ blog_id: 23 }}>
click here
</Link>
.
</p>
</div>
);
};