Route which only redirects

[mtscout6]

I have a route that I would like to always do a redirect to a deeper url. My attempt to do so is as follows: (Example is in cjsx, a coffeescript variation of jsx)

Redirect = React.createClass
  displayName: 'Redirect'
  statics:
    willTransitionTo: (transition) ->
      transition.redirect(@props.redirect)
  render: (->)

# TODO: When react-router updates utilize Routes.initialPath
# For details see: https://github.com/rackt/react-router/issues/111
React.renderComponent(
  <Routes location='history'>
    <Route handler={Guide}>
      <Route name='style-guide' path='/style-guide' handler={Redirect} redirect='/style-guide/components' />
      <Route name='components' path='/style-guide/components' handler={StyleGuideComponent} />
      <Route name='icons' path='/style-guide/icons' handler={IconsComponent} />
    </Route>
  </Routes>,
  document.body
)

The problem is that you will ever be able to access the props in willTransitionTo since it's static. Do y'all have any suggestions?

[ryanflorence]

Man ... path={/regex/} would be pretty useful here. Then you don't have all these redirects.

[ryanflorence]

For now you just need redirect classes for anything that redirects so they know where to go. Could at least share code with a Redirect mixin though.

[ryanflorence]

I don't see a problem with tacking the route props onto the arguments:

willTransitionTo(transition, params, query, routeProps)

[mtscout6]

That last solution seems like the quickest solution, I like the idea of a regex path though.

[bobeagan]

Seems like this is swinging back towards something like #67

[ryanflorence]

@mtscout6 actually, this is quite perfect to me:

var NotFound = React.createClass({
  statics: {
    redirects: {
      '/style-guide': '/style-guide/components'
    },

    willTransitionTo: function(transition) {
      var redirectPath = this.redirects[transition.path];
      if (redirectPath)
        transition.redirect(redirectPath);
    }
  },

  render: function() {
    return <h1>Not found</h1>;
  }
});

React.renderComponent(
  <Routes location='history'>
    <Route handler={Guide}>
      <Route name='style-guide' path='/style-guide' handler={Redirect} />
      <Route name='components' path='/style-guide/components' handler={StyleGuideComponent} />
      <Route name='icons' path='/style-guide/icons' handler={IconsComponent} />
      <Route handler={NotFound}/>
    </Route>
  </Routes>,
  document.body
);

[mtscout6]

Nice I like that!

[mtscout6]

Thanks!

[mtscout6]

You know that would be a really easy mixin!

[mtscout6]

If you'd like I can follow that up with a PR later today.

[ryanflorence]

actually, I don't think that works :\

[ryanflorence]

yeah, because we don't have a root route handler that is guaranteed to be matched, we need a defaultHandler somewhere when paths don't match.

[mtscout6]

Which is where the regex pattern match would come in handy.