<Router .../>
Renders components based on location paths. It doesn't need a wrapper, and routes can be nested. When a route is nested, the paths are relative to the parent route. <Router.Default/> can be used for rendering a default/404 when no sibling routes match.
# Attributes
| name | type | description |
|---|---|---|
| path? | string | when the location matches this path, the children of this Route will render. When path is not defined, it will render its children only when the parent route path matches the location exactly |
| params? | key-value pairs object | used to replace params for URI encoded equivalents. <Router path="/some/:cat/:page" params={{ cat: "variété", page:"touché" }}/> will become <Router path="/some/vari%C3%A9t%C3%A9/touch%C3%A9"/> |
| children? | any | thing to render. |
| collapse? | boolean [false] | instead of disposing/unmounting the route it will be hidden, useful for frames and canvas that would lose state if removed from the document |
| when? | signal | an optional condition to stop rendering the route even if the path matches. |
| fallback? | any | fallback for when a `when` condition is set. if the `when` condition is not set, this wont be used. |
| scroll? | string[] | array of selectors to scroll when the route matches |
load function, as in children={load(()=>import('dynamic-import.jsx')} can be used for lazy loading. It will retry a couple of times on network errors, and will scroll the document.
# Snippet
# Test
some router testing
# Collapse
Collapse hides a route instead of unmounting it, so it avoids a re render and could be helpful to keep state of iframes, canvas, video, audio or anything