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!
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}/>
);
}
});