Navigating from javascript about react-router-component

[andreypopp]

If you have a reference to a router, you can just do router.navigate('/sessions/new'). You can acquire a reference to a router via refs.

[polmiro]

Does this mean I have to propagate this router throughout all components? Any workaround if I just have a global router?

[andreypopp]

Yes, you can mixin NaviagatableMixin and use this.navigate(path) method:

var Component = React.createClass({
  mixins: [require('react-router-component/lib/NavigatableMixin')],

  redirect: function() {
    this.navigate('/sessions/new')
  },

  ...
})

Component should be created inside one of route handlers. But even that requirement could be removed if you use routing environment directly. See how Link component is implemented — https://github.com/andreypopp/react-router-component/blob/master/lib/Link.js#L64

[polmiro]

Great, thanks for the clarifications.

[andreypopp]

@polmiro do you think we can close this issue?

[polmiro]

Yes, I also realized you are working on QuerystringKeyEnvironment for 0.16.0. I think it's going to be exactly what I need 👍

[andreypopp]

@polmiro yeah, QuerystringKeyEnvironment is alrady there but undocumented and doesn't support server side rendering yet.

[saidimu]

For anyone else looking to redirect, here's a gist of a simple component that I use: https://gist.github.com/saidimu/2758402f7916f4e35dee

// jshint unused:true
var React = require('react');

var NavigatableMixin = require('react-router-component').NavigatableMixin;

var Redirect = React.createClass({
  mixins: [NavigatableMixin],

  _redirect: function(url) {
    this.navigate(url);
  },

  propTypes: {
    url: React.PropTypes.string.isRequired,
  },

  componentDidMount: function() {
    console.log('Redirecting to %s: ', this.props.url);
    this._redirect(this.props.url);
  },

  render: function() {
    return null;
  }
});//Redirect

module.exports = Redirect;