Preact-path NPM

Preact-path

This is a small (1.33 kB gzip) group of components that facilitate route management in applications based on Preact.

This component creates a context that does not depend on the route events popState or hashChange, If you want to transmit the Provider changes to the browser path use the History property to hear those changes.

Why react-path?

Unlike other routers, preact-path allows to componentize the route without knowing the general context, similar to how a relative directory operates, this is achieved through the <Root/> component, this allows defining a scope for the components that this contain Root can also inherit range from another Root.

<Provider capture={true}>
   <Root path="/folder-a">
       <div>
           <Root path="/folder-b">
               <a href="/1"> Open folder 1 </a>
               <a href="/2"> Open folder 2 </a>
               <a href="../"> Open folder c </a>
           </Root>
           <Root path="/folder-c">
               <a href="/1"> Open folder 1 </a>
               <a href="/2"> Open folder 2 </a>
               <a href="../"> Open folder b </a>
           </Root>
       </div>
   </Root>
</Provider>

The previous example only shows how internal contexts are created to limit the scope of the links associated with the Root component.

Route expressions

Preact-path makes use of the library path-path, this transforms the route expressions to a regular expression, with it is able to capture the parameters associated with the route.

Parameter `/:param`

By means of the expression /:<name_param>, you can capture a parameter of the route, this is strict before the existence of this parameter.

Optional parameter `/:param?`

By means of the expression /:<name_param>?, You can capture a parameter of the route, this is optional before the existence of this parameter.

Optional and unlimited parameter `/:param...`

By means of the expression /:<name_param>..., you can capture a parameter of the route, this is optional before the existence of this parameter, it also ends the route expression, since it captures everything that goes with it.

Comodin `/**`

by means of the expression /**, you give permission for any route parameter to enter whenever it exists.

Component `<Provider/>`

This allows you to create a context that will be shared by all the components associated with it.

import {Provider } from "preact-path";
import App from "./app";

render(
   <Provider>
       <App/>
   </Provider>,
   document.querySelector("#app")
)

Propiedades

Property	Type	Required	Default	Description
capture	Boolean	false	--	Allows you to capture the click events
history	function	false	--	Allows access to the provider object that controls the status of the route
redirect	function	false	--	It allows to capture the redirection and modify the redirections

Component `<Switch/>`

This allows to define which child associated to the component will be printed before the change of route.

import {Provider,Switch } from "preact-path";

render(
   <Provider>
       <Switch>
           <h1 path="/">Route /</h1>  
           <h1 path="/:param">Route /:param</h1> 
           <h1 path="/fixed/:paramOptional?">Route /fixed/:paramOptional?</h1> 
           <h1 path="/fixed/fixed/:paramInfinite...">Route /fixed/fixed/:paramInfinite...</h1> 
           <h1 default>Route /:default...</h1> 
       </Switch>
   </Provider>,
   document.querySelector("#app")
)

Properties

Estas propiedades solo se definen a los niños del componente.

Propiedad	Tipo	Requerido	Default	Descripción
path	string	true	--	Permite definir si este hijo será impreso al realizar la comparación con la ruta actual
default	boolean	true	--	Este debe ser asignado al último componente de la lista de hijos, permite impreso en el caso de que ningún otro lo haya sido

Component `<Root/>`

This component allows defining a route scope for the child.

import {Provider,Switch,Root } from "preact-path";

render(
   <Provider>
       <Root path="/folder">
           <Switch>
               <h1 path="/">Route /folder</h1>  
               <h1 path="/:param">Route /folder/:param</h1> 
               <h1 path="/fixed/:paramOptional?">Route /folder/fixed/:paramOptional?</h1> 
               <h1 path="/fixed/fixed/:paramInfinite...">Route /folder/fixed/fixed/:paramInfinite...</h1>
               <h1 default>Route /folder/:default...</h1> 
           </Switch>
       </Root>   
   </Provider>,
   document.querySelector("#app")
)

The Root component generates a context that inherits the property path from the parent.

Properties

Propiedad	Tipo	Requerido	Default	Descripción
path	string	true	--	It allows to define if this child will be printed when making the comparison with the current route

Componente `<Route/>`

This component allows you to print the child only if the comparison matches.

import {Provider,Route } from "preact-path";

render(
   <Provider>
        <Route path="/:param">
           {(params,redirect)=><h1>Route</h1>}
        </Route> 
   </Provider>,
   document.querySelector("#app")
)

Properties

Propiedad	Tipo	Requerido	Default	Descripción
path	string	true	--	It allows to define if this child will be printed when making the comparison with the current route

Component `<Subscriber/>`

This component allows you to subscribe to all the changes that the Provider component sends.

import {Provider,Subscriber } from "preact-path";

render(
   <Provider>
        <Subscriber>
           {(path,redirect)=><h1>Route : {path}</h1>}
        </Subscriber> 
   </Provider>,
   document.querySelector("#app")
)

Component `<Match/>`

This component is of a static nature, it only generates a comparison between match and path

import {Provider,Match } from "preact-path";

render(
   <Provider>
        <Match match="/:param" path="/mi-ruta">
           {(path,redirect)=><h1>Route : {path}</h1>}
        </Match> 
   </Provider>,
   document.querySelector("#app")
)