https://github.com/uppercod/router
https://github.com/uppercod/router
hooks jsx router
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/uppercod/router
- Owner: UpperCod
- Created: 2019-03-03T16:27:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-20T06:05:42.000Z (about 7 years ago)
- Last Synced: 2025-04-10T03:58:26.468Z (about 1 year ago)
- Topics: hooks, jsx, router
- Language: JavaScript
- Size: 192 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @atomico/router
[](https://circleci.com/gh/atomicojs/router)
[](http://npmjs.com/@atomico/router)
[](https://bundlephobia.com/result?p=@atomico/router)
Pequeño enrutador para la gestión de rutas con Atomico.
```jsx
import { h } from "@atomico/core";
import { lazy } from "@atomico/lazy";
import { Router } from "@atomico/router";
let PageHome = lazy(() => import("./pages/home"));
let PageUsers = lazy(() => import("./pages/users"));
let PageConfig = lazy(() => import("./pages/config"));
let NotFound = () =>
404
;
function App() {
return (
);
}
```
## Parametros de ruta
| tipo | comodin | ejemplo |
| ------------------- | -------------- | -------------------- |
| requerido | | `/folder/folder` |
| parametro requerido | `/:folder` | `/:paramA/:paramB` |
| parametro opcional | `/:folder?` | `/:paramA?/:paramB?` |
| parametro spread | `/:folders...` | `/:folders...` |
## hooks
### useMatchRoute
```js
let [inRoute, params] = useMatchRoute("/:id");
```
Compara la ruta actual con el patrón de captura, **Este hooks no se suscribe a history**
### useRoute
```js
let [inRoute, params] = useRoute("/:id");
```
Compara la ruta actual con el patrón de captura, **Este hooks si se suscribe a history**
### useRedirect
Este hook admite un primer parámetro opcional, que modifica su comportamiento.
#### redirect estatico
Este tipo de redirect aplica memo, por lo que el callback solo mutara si el primer parámetro muta.
```jsx
let toHome = useRedirect("/");
click ;
```
#### redirect dinamico
Este redirect esta pensado para pathname dinámicos.
```jsx
let redirect = useRedirect();
redirect("/")}> click ;
```
### useHistory
se suscribe al historial del navegador.
```jsx
let [pathname, redirect] = useHistory();
```