Search code examples
javascriptmeteorreact-routermeteor-accounts

How to navigate back to last route with react-router?


I'm building a Meteor + React + Material-UI app and I'm using react-router and meteor-accounts-react-material-ui.

The docs for meteor-accounts-react-material-ui show examples using FlowRouter to specify a redirect function to call after successful login: <Accounts.ui.LoginFormSet redirect={handleLogin}/>

Since I don't believe you can pass the redirect property to the Accounts.ui.LoginFormSet component with react-router's route:

Routes = React.createClass({  
  getInitialState: function() {
    return {};
  },
  render: function () {
    return (
      <Router history={browserHistory}>
        <Route name="home" path="/login" component={LoginWrapper}/>
      </Router>
    );
  }
});

The best way I can figure out how to reproduce this with react-router is to wrap the Accounts.ui.LoginFormSet component like so:

var LoginWrapper = React.createClass({
  handleLogin: function() {
    //what do I put in here?
  },
  render: function () {
    return (
        <Accounts.ui.LoginFormSet redirect={this.handleLogin}/>    
    );
  }
});

However, what I can't seem to figure out is how to actually redirect to the last route that called the /login route (i.e. the referrer).

Any ideas?

Thanks!


Solution

  • Thanks to this answer from qnub on Github, I managed to resolve this issue:

    var LoginWrapper = React.createClass({
      handleLogin: function() {
          // redirect through ReactRouter if it have ability or through window:
          window.location.href = this.targetUrl;
      },
      render: function () {
        this.targetUrl = window.location.href; // save target URL from window on through ReactRouter if it have ability
        return (
            <Accounts.ui.LoginFormSet redirect={this.handleLogin}/>    
        );
      }
    });