@orby/router

manages routes in a simple and elegant way with only 1kB.

<Router>
    <Async
        path="/config"
        loading="...loading"
        render={() =>import("./page/config.js")}
        />
    <Async
        path="/users"
        loading="...loading"
        render={() =>import("./page/users.js")}
        />
    <NoFound default/>
</Router>

1. Components
   1. Provider
   2. Route
   3. Link
   4. Router
   5. Async
   6. Folder
2. Hooks
   1. useRedirect
3. Path expression

Components

Provider

By default @orby/router can handle a route status without using popstate, if you want to handle the browser history you must add this must be added manually by using history={insertHistory}.

<Provider location="/">
    <App/>
</Provider>

|Property|Type|default|Description| |--------|----|-------|-----------| | location | string | / | current location to be transmitted by context | | history | function || history allows access to the subscriber object of <Provider/>, it is useful to build custom triggers like insertHistory that manages the browser history |

Route

Listen to a <Provider/> path based on an expression given to the path property, example path="/users/**"

<Route path="/user/*!">
    {([id])=>{
        return <h1>user id:{$id}</h1>
    }}
</Route>

|Property|Type|default|Description| |--------|----|-------|-----------| | path | string | / | valid expression for path |

Link

Allows dispatching a link to the <Provider/> component.

<Link path="/users">
    view users
</Link>

You can also create redirect callback using useRedirect.

|Property|Type|default|Description| |--------|----|-------|-----------| | path | string | / | valid expression for path |

Router

Router selects one of its children for the view, you can use the <Async/> component to generate asynchronous component loads, either through the use of import or Promise

<Router>
    <Async
        path="/config"
        loading="...loading"
        render={() =>import("./page/config.js")}
        />
    <Async
        path="/users"
        loading="...loading"
        render={() =>import("./page/users.js")}
        />
    <NoFound default/>
</Router>

|Property|Type|default|Description| |--------|----|-------|-----------| | path | string | / | valid expression for path, the first child to match the path pattern will be printed by <Router/> | | default | boolean || the default component is selected by default, in case no patron of the list of children draws the pattern |

Async

allows to generate an asynchronous load of a component, it can only be used as a child of <Router/>

<Router>
    <Async
        path="/config"
        loading="...loading"
        render={() =>import("./page/config.js")}
        />
    <Async
        path="/users"
        loading="...loading"
        render={() =>import("./page/users.js")}
        />
    <NoFound default/>
</Router>

|Property|Type|default|Description| |--------|----|-------|-----------| | path | string | / | expression path, the first child to match path expression will be printed by <Router/> | | default | boolean || selects the default component by default, in case no expression in the list of children draws the comparison | | loading | any || while waiting for the completion of the asynchronous function, it will be shown loading | | render | function || render should always return a promise, to directly use the component <Async/> will import the module.default property by default from the module |

Folder

Allows to manipulate the group context with the intention of storing the path, managing to isolate the behavior of useRedirect, <Router/> and <Router/>, only within the path given by <Folder/>.

<Folder path="/users">
    <Route path="/*?">
        {([id])=>{
            return id;
        }}
    </Route>
</Folder>	

the path to listen for the <Route/> component will be /users/*?.

| Propiedad | Tipo | default | Detalle | | --------- | ------ | ------- | ----------------------------------- | | path | string | / | valid expression for path |

Hooks

useRedirect

allows you to create a callback layers to dispatch a new route status

let redirectToUsers = useRedirect("/users");

path

path is defined as an expression string to use within the router, it serializes the captures in an array that can be read by destructuring assignment. path offers the following reading based on the following wildcards

1. parameter: /*!, Capture a parameter of the route.
2. optional parameter: /*? Captures an optional parameter
3. spread parameters: /... captures 0 or more parameters from its definition, this should only be used at the end of the path expression
4. wildcard any: /image.*.Jpeg allows you to accept routes without the need to know their exact value.
5. optional folders: /users|user accepts the route in 2 versus 2 conditions /users or /user