Add "default route" handler

[mjackson]

Proposal: <Route defaultRouteHandler> specifies a route handler that is rendered when a route matches on the path but none of its children do. It is akin to Ember's "index" routes and gives us a declarative way to specify a default handler for a route instead of using

render: function () {
  return this.props.activeRouteHandler() || somethingElse();
}

You use it like this.

In addition, when a route uses defaultRouteHandler, the value of this.props.activeRouteHandler should automatically use it so the user can write

render: function () {
  return this.props.activeRouteHandler();
}

instead of

render: function () {
  return this.props.activeRouteHandler() || this.props.defaultRouteHandler();
}

[mjackson]

A few variations on this same idea:

1 Use a defaultRouteHandler prop:

<Route path="users/:userID" handler={User} defaultRouteHandler={Details}>
  <Route path="users/:userID/activity" handler={Activity}/>
</Route>

2 Move defaultRouteHandler out into its own component:

<Route path="users/:userID" handler={User}>
  <Route path="users/:userID/activity" handler={Activity}/>
  <!-- A DefaultRoute magically gets its parent's path -->
  <DefaultRoute handler={Details}/>
</Route>

3 Use a layoutHandler prop to make it more explicit that User is used for layout:

<Route path="users/:userID" handler={Details} layoutHandler={User}>
  <Route path="users/:userID/activity" handler={Activity}/>
</Route>

4 Use a Layout component that does the same thing:

<Layout path="users/:userID" handler={User}>
  <Route path="users/:userID" handler={Details}>
  <Route path="users/:userID/activity" handler={Activity}/>
</Layout>

AFAICT, these would all work exactly the same. Only difference is readability/documentation.

[mjackson]

Looking at no. 2 makes me wonder if all <Route>s without a name/path should inherit path from their parent. Makes a little more sense than assigning them path="/"...

Edit: It would also let us reduce no. 4 to this:

<Layout path="users/:userID" handler={User}>
  <Route path="users/:userID/activity" handler={Activity}/>
  <Route handler={Details}>
</Layout>

[ryanflorence]

I like <DefaultRoute/> the most.

[mjackson]

Here's the implementation for <DefaultRoute> if we default routes with no name/path to using the path of their parent route (which I really want to do):

Router.DefaultRoute = Router.Route;

[ryanflorence]

haha, alright, lets do the no-name-inherit, and if it gets confusing, we'll bring in that amazing component.

[ryanflorence]

s/gets confusing/if we find we are explaining how to use it a lot/

[ryanflorence]

note, this will require a version bump since an omitted path means something different

[mjackson]

👍

[mjackson]

The only reason I don't like <DefaultRoute> is because it gives people the idea that they can put it out of order in their route config, which goes contrary to the way we normally traverse the routes.

Should we make an exception in this case? Would that be confusing?

Edit: I should mention that I believe traversing the routes in order is a pretty great thing. It helps a lot with readability and debugging. If we start making exceptions to that rule, we need to be very explicit about it.

[ryanflorence]

You're right, I would expect to be able to place it before or after any sibling, I think the exception is fine here.

<Route>
  <Route/>
  <DefaultRoute/>
  <Route/>
</Route>

<Route>
  <DefaultRoute/>
  <Route/>
  <Route/>
</Route>

<Route>
  <Route/>
  <Route/>
  <DefaultRoute/>
</Route>

[mjackson]

Yeah, I think I know a clean way to do it. Need to play around with it a little.