1 | <div align="center">
|
2 |
|
3 | ![yrv](yrv.png)
|
4 |
|
5 | ![Build status](https://github.com/pateketrueke/yrv/workflows/build/badge.svg)
|
6 | [![NPM version](https://img.shields.io/npm/v/yrv)](https://www.npmjs.com/package/yrv)
|
7 | [![Known Vulnerabilities](https://snyk.io/test/npm/yrv/badge.svg)](https://snyk.io/test/npm/yrv)
|
8 |
|
9 | </div>
|
10 |
|
11 | > The `v` is for Svelte
|
12 |
|
13 | Built on top of [abstract-nested-router](https://www.npmjs.com/package/abstract-nested-router), so you can use nested routers, also:
|
14 |
|
15 | - Advanced parameters can be used, e.g. `/:id<\d+>` — [see docs](https://www.npmjs.com/package/abstract-nested-router#params)
|
16 | - ARIA-compliant, sets `[aria-current="page"]` on active links
|
17 | - Seamless `<base href="..." />` integration
|
18 | - Conditionals and redirection through props
|
19 | - Fallback `<Route />` handlers
|
20 | - Hash and URI-based routes
|
21 | - Support for [query-string](https://www.npmjs.com/package/query-string)
|
22 | - [REPL ready!](https://svelte.dev/repl/0f07c6134b16432591a9a3a0095a80de?version=3.12.1)
|
23 |
|
24 | > `yrv` will use any _base-href_ found on the current page to rewrite links and routes.
|
25 |
|
26 | ## Usage
|
27 |
|
28 | Install `yrv` through NPM or Yarn:
|
29 |
|
30 | ```html
|
31 | <script>
|
32 | import { Router, Route, Link } from 'yrv';
|
33 | </script>
|
34 |
|
35 | <Link href="/">Home</Link>
|
36 | | <Link href="/World">Hello</Link>
|
37 | | <Link href="/not/found">NotFound</Link>
|
38 |
|
39 | <p>
|
40 | <Router>
|
41 | <Route exact>Hello World</Route>
|
42 | <Route fallback>Not found</Route>
|
43 | <Route exact path="/:name" let:router>Hey {router.params.name}!</Route>
|
44 | </Router>
|
45 | </p>
|
46 | ```
|
47 |
|
48 | > Notice `fallback` routes can’t be placed at the beginning, otherwise further routes will not be mounted. :bomb:
|
49 |
|
50 | ## Components
|
51 |
|
52 | > You MUST declare at least, one top-level `Router` to setup the bindings.
|
53 |
|
54 | ### `<Router {path} {disabled} {condition} {nofallback} />`
|
55 |
|
56 | This component will hold any given routes as children, path is always derived from parent ones.
|
57 |
|
58 | Available props:
|
59 |
|
60 | - `{path}` — Any segment to derive a fullpath from, default to `/`
|
61 | - `{disabled}` — Boolean; Similar to condition, but for bound props
|
62 | - `{condition}` — Function; if given, render only if evaluates to true
|
63 | - `{nofallback}` — If set, non-matched routes will never raise a failure
|
64 |
|
65 | ### `<Route {key} {path} {props} {exact} {fallback} {component} {disabled} {condition} {redirect} let:router />`
|
66 |
|
67 | Main container for routing, they can hold any component or children.
|
68 |
|
69 | Available props:
|
70 |
|
71 | - `{key}` — The route identity, not its path; default to random pseudo-hash
|
72 | - `{path}` — Any segment to derive a fullpath from, default to `/`
|
73 | - `{props}` — Additional properties for rendered component
|
74 | - `{exact}` — If set, the route will render only if the route exactly matches
|
75 | - `{fallback}` — If set, the route will render only if no more routes were matched
|
76 | - `{component}` — A valid svelte-component to render if the route matches
|
77 | - `{disabled}` — Boolean; Similar to condition, but for bound props
|
78 | - `{condition}` — Function; if given, the route will render only if evaluates to true
|
79 | - `{redirect}` — Alternate redirection location, only if the previous condition was true
|
80 | - `let:router` — Injects the `router` context, it also provides `failure` in case of errors
|
81 |
|
82 | > If you omit `exact`, then `/x` would match both `/` and `/x` routes — [see docs](https://www.npmjs.com/package/abstract-nested-router#params)
|
83 |
|
84 | ### `<Link {go} {href} {title} {exact} {reload} {replace} {class|className} />`
|
85 |
|
86 | In order to navigate, you can use `Link` components, or regular links, etc.
|
87 |
|
88 | > All `href` values MUST be absolute, only links starting with `/` or `#` are allowed.
|
89 |
|
90 | Available props:
|
91 |
|
92 | - `{go}` — History shortcut (see below)
|
93 | - `{href}` — New location, default to `/`
|
94 | - `{title}` — HTML title-attribute value
|
95 | - `{button}` — If set, will use button-tag instead
|
96 | - `{exact}` — Determine if link should match exactly to be set as active
|
97 | - `{reload}` — Use `location.href` instead
|
98 | - `{replace}` — Use `history.replaceState()` instead
|
99 | - `{class|className}` — Custom class-name for the mounted anchor
|
100 |
|
101 | Normal `on:click` events are still allowed, so you can use:
|
102 |
|
103 | ```html
|
104 | <Link on:click={() => location.reload()}>Reload</Link>
|
105 | ```
|
106 |
|
107 | > Active _links_ will gain the `[aria-current]` attribute, and `[disabled]` if they're buttons.
|
108 |
|
109 | Aditionally, you can setup `go` to moving around:
|
110 |
|
111 | - `"back"` — String; if given, will invoke `history.back()`
|
112 | - `"fwd"` — String; if given, will invoke `history.fwd()`
|
113 | - `n` — Number; if given, it'll be used to invoke `history.go(n)`
|
114 |
|
115 | > If navigating through `history` is not possible a normal redirection will run. :anchor:
|
116 |
|
117 | ## Public API
|
118 |
|
119 | - `navigateTo(path[, options])` — Change the location, supported options are:
|
120 | - `reload` — If true, it will use `document.location.href` instead
|
121 | - `replace` — If true, it will use `history.replaceState()` instead
|
122 | - `params` — Used to replace `:placeholders` from given path
|
123 | - `queryParams` — Additional search-params for the new location
|
124 | - `$router` — Store with shared routeInfo details, similar to `let:router`
|
125 |
|
126 | > `yrv` gracefully degrades to `location.hash` on environments where `history` is not suitable, also it can be forced through `Router.hashchange = true`.
|