Fix link + docs (#2476)
* Fix a copy/paste fail Also, fix some incorrect tests. * Clarify how routes are diffed, improve key + route resolver docs - Add some missing links to route resolvers and single-child keyed fragments, clarify usage around them. - Drive-by: remove a redundant sentence that itself was missing a period. * Actually test for propagation and preventDefault Previously, the mocks were both junk and inaccurate. No wonder my tests were silently failing - they were wrong and not obviously wrong.
This commit is contained in:
parent
c3cca5f8e2
commit
4cbcaf2936
6 changed files with 288 additions and 108 deletions
|
|
@ -243,6 +243,15 @@ As a rule of thumb, RouteResolvers should be in the same file as the `m.route` c
|
|||
|
||||
`routeResolver = {onmatch, render}`
|
||||
|
||||
When using components, you could think of them as special sugar for this route resolver, assuming your component is `Home`:
|
||||
|
||||
```js
|
||||
var routeResolver = {
|
||||
onmatch: function() { return Home },
|
||||
render: function(vnode) { return [vnode] },
|
||||
}
|
||||
```
|
||||
|
||||
##### routeResolver.onmatch
|
||||
|
||||
The `onmatch` hook is called when the router needs to find a component to render. It is called once per router path changes, but not on subsequent redraws while on the same path. It can be used to run logic before a component initializes (for example authentication logic, data preloading, redirection analytics tracking, etc)
|
||||
|
|
@ -266,7 +275,7 @@ If `onmatch` returns a promise that gets rejected, the router redirects back to
|
|||
|
||||
##### routeResolver.render
|
||||
|
||||
The `render` method is called on every redraw for a matching route. It is similar to the `view` method in components and it exists to simplify [component composition](#wrapping-a-layout-component).
|
||||
The `render` method is called on every redraw for a matching route. It is similar to the `view` method in components and it exists to simplify [component composition](#wrapping-a-layout-component). It also lets you escape from Mithril's normal behavior of replacing the entire subtree.
|
||||
|
||||
`vnode = routeResolve.render(vnode)`
|
||||
|
||||
|
|
@ -276,6 +285,8 @@ Argument | Type | Description
|
|||
`vnode.attrs` | `Object` | A map of URL parameter values
|
||||
**returns** | `Array<Vnode>|Vnode` | The [vnodes](vnodes.md) to be rendered
|
||||
|
||||
The `vnode` parameter is just `m(Component, m.route.param())` where `Component` is the resolved component for the route (after `routeResolver.onmatch`) and `m.route.param()` is as documented [here](#mrouteparam). If you omit this method, the default return value is `[vnode]`, wrapped in a fragment so you can use [key parameters](#key-parameter). Combined with a `:key` parameter, it becomes a [single-element keyed fragment](keys.md#single-child-keyed-fragments), since it ends up rendering to something like `[m(Component, {key: m.route.param("key"), ...})]`.
|
||||
|
||||
---
|
||||
|
||||
#### How it works
|
||||
|
|
@ -352,7 +363,7 @@ m.route(document.body, "/", {
|
|||
})
|
||||
```
|
||||
|
||||
Here we specify two routes: `/` and `/page1`, which render their respective components when the user navigates to each URL. By default, the SPA router prefix is `#!`
|
||||
Here we specify two routes: `/` and `/page1`, which render their respective components when the user navigates to each URL.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -364,6 +375,8 @@ You can also navigate programmatically, via `m.route.set(route)`. For example, `
|
|||
|
||||
When navigating between routes, the router prefix is handled for you. In other words, leave out the hashbang `#!` (or whatever prefix you set `m.route.prefix` to) when linking Mithril routes, including in both `m.route.set` and in `m.route.Link`.
|
||||
|
||||
Do note that when navigating between components, the entire subtree is replaced. Use [a route resolver with a `render` method](#routeresolverrender) if you want to just patch the subtree.
|
||||
|
||||
---
|
||||
|
||||
### Routing parameters
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue