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.

docs/keys.md

@@ -2,6 +2,7 @@
 
 - [What are keys](#what-are-keys)
 - [How to use](#how-to-use)
+	- [Single-child keyed fragments](#single-child-keyed-fragments)
 - [Debugging key related issues](#debugging-key-related-issues)
 
 ---
@@ -75,7 +76,9 @@ function correctUserList(users) {
 }
 ```
 
-Also, you might want to reinitialize a component. You can use the common pattern of a single-child keyed fragment where you change the key to destroy and reinitialize the element.
+#### Single-child keyed fragments
+
+Sometimes, you might want to reinitialize a component on command. You can use the common pattern of a single-child keyed fragment where you change the key to destroy and reinitialize the element.
 
 ```javascript
 function ResettableToggle() {
@@ -96,6 +99,20 @@ function ResettableToggle() {
 }
 ```
 
+You can also bind it to a known identity, for things like item views where you need to fetch a remote resource based on an ID. It's usually simpler than implementing all the logic to diff the ID and re-fetch a resource if it changes.
+
+```javascript
+function Page() {
+	return {
+		view: function() {
+			return m(Layout, [
+				[m(ItemView, {key: m.route.param("id")})],
+			])
+		}
+	}
+}
+```
+
 ---
 
 ### Debugging key related issues
@@ -120,7 +137,7 @@ users.map(function(u) {
 If you refactor the code and make a user component, the key must be moved out of the component and put on the component itself, since it is now the immediate child of the array.
 
 ```javascript
-// AVOID
+// AVOID - doesn't work
 var User = {
 	view: function(vnode) {
 		return m("div", { key: vnode.attrs.user.id }, [
@@ -137,7 +154,7 @@ users.map(function(u) {
 
 #### Avoid wrapping keyed elements in arrays
 
-Arrays are [vnodes](vnodes.md), and therefore keyable. You should not wrap arrays around keyed elements
+Arrays are [vnodes](vnodes.md), and therefore keyable. You should not wrap arrays around keyed elements outside [single-child keyed fragments](#single-child-keyed-fragments).
 
 ```javascript
 // AVOID

docs/route.md

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