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.

[mtscout6]

Or are you thinking of a defaultHandler on Routes?

[ryanflorence]

sorry, I'm a bit slow this morning, this is your solution 📦

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>
    <Route path="*" handler={NotFound}/>
  </Routes>,
  document.body
);

Note I just moved the NotFound route and added a path="*" to it. Now it'll match when nothing else does. If you want it to nest inside the Guide UI, then just move it up in there like this:

  <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 path="*" handler={NotFound}/>
    </Route>
  </Routes>

[mtscout6]

Would you be open to a mixin that does that?

[mjackson]

@mtscout6 Let's follow up in #140

[ryanflorence]

@mtscout6 would like to keep this library as slim as possible, but I'd encourage you to put it up on github and we'll link to it in the "Related Modules" section :)