https://github.com/uppercod/router

https://github.com/uppercod/router

hooks jsx router

Last synced: 6 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/uppercod/router
• Owner: UpperCod
• Created: 2019-03-03T16:27:57.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-05-20T06:05:42.000Z (over 5 years ago)
• Last Synced: 2024-11-05T22:20:41.458Z (about 2 months ago)
• Topics: hooks, jsx, router
• Language: JavaScript
• Size: 192 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @atomico/router

[![CircleCI](https://circleci.com/gh/atomicojs/router.svg?style=svg)](https://circleci.com/gh/atomicojs/router)

[![npm](https://badgen.net/npm/v/@atomico/router)](http://npmjs.com/@atomico/router)

[![gzip](https://badgen.net/bundlephobia/minzip/@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();

```