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:
Isiah Meadows 2019-07-16 16:03:24 -04:00 committed by GitHub
parent c3cca5f8e2
commit 4cbcaf2936
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 288 additions and 108 deletions

View file

@ -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