Make Route more extensible

[ryanflorence]

For cases like #52 it would be lovely to provide interesting extension points.

We could start by first making everything in Route a RouteMixin, and then export Route as nothing more then a component that uses it. This would allow people to start adding their own custom behavior to their Route config.

[mjackson]

I'm not opposed to this, though it seems like #52 should be solved by using a transition.redirect( ... ) in the willTransitionTo hook of the route handler. I'm not sure it represents a good use case.

[mjackson]

To clarify, the PostPage handler from #52 could have looked like this:

var PostPage = React.createClass({

  statics: {

    paramsAreValid: function (params) {
      // ...
    },

    willTransitionTo: function (transition, params) {
      if (!PostPage.paramsAreValid(params))
        transition.redirect('404');
    }

  }

});

Of course, this requires you to create your own paramsAreValid method for each route handler.

But also, consider the case where paramsAreValid succeeds but you still have a 404. Still going on the example from #52, assume the id param is indeed numeric but the id isn't found in the database. You still need to redirect to the 404 in that case. So it weakens the argument for param validation based on regex IMO.

[ryanflorence]

Ignoring #52 (since it has been solved quite nicely with https://github.com/bjyoungblood/rnr-constrained-route) I still wonder if there's some interesting stuff we just aren't thinking about yet that could happen if people could make their own <Route>.

But until we have a strong use-case that can't be solved elegantly with the existing api, happy to leave this sitting here and pick it up then.

[madebyherzblut]

@rpflorence Can you post an example how this could solve the context problem discussed in #57?

[ryanflorence]

var ContextualRoute = React.createClass({
  mixins: [ Router.RouteMixin ],

  getDefaultProps: function() {
    return { context: { foo: 'bar' } }
  }
});

<ContextualRoute handler={App}/>
<!-- instead of -->
<Route context={context} handler={App}/>

[ryanflorence]

I don't think we need to do anything fancy here anymore, the way we've implemented <Redirect/> shows that making custom route config components is trivial. https://github.com/rackt/react-router/blob/master/modules/components/Redirect.js

Unless @spicyj sees something terrible about treating a plain old function like a component ... I felt a little sneaky when I wrote that code.

[sophiebits]

Actually, yes. Plain functions will soon cease to work in JSX because of a handful of changes we're planning to make soon – you'll hear more details from @sebmarkbage when they're ready.

[ryanflorence]

Would like to know how to accomplish what we have with Redirect so we can change the implementation before those changes break it.