我建立使用应用程序Facebook flux
的体系结构React JS
。我已经构建了应用程序的基本部分,其中有一个登录表单。我正在从节点服务器获取结果以在商店验证用户,我正在从服务器获取结果,现在我遇到了问题,如何在成功后将用户重定向到主页。
我已阅读有关 react 路由器组件的信息,并且能够在客户端进行重定向,但无法在从 Store 中的 ajax 获取结果时进行重定向。请帮我。
我建立使用应用程序Facebook flux
的体系结构React JS
。我已经构建了应用程序的基本部分,其中有一个登录表单。我正在从节点服务器获取结果以在商店验证用户,我正在从服务器获取结果,现在我遇到了问题,如何在成功后将用户重定向到主页。
我已阅读有关 react 路由器组件的信息,并且能够在客户端进行重定向,但无法在从 Store 中的 ajax 获取结果时进行重定向。请帮我。
您需要使用mixin 中的transitionTo
函数Navigation
:http : //git.io/NmYH。它会是这样的:
// I don't know implementation details of the store,
// but let's assume it has `login` function that fetches
// user id from backend and then calls a callback with
// this received id
var Store = require('my_store');
var Router = require('react-router');
var MyComponent = React.createClass({
mixins: [Router.Navigation],
onClick: function() {
var self = this;
Store.login(function(userId){
self.transitionTo('dashboard', {id: userId});
});
},
render: function() {
return: <button onClick={this.onClick}>Get user id</button>;
}
});
当我将路由器的要求添加到react元素属性并像这样使用路由器时,它对我有用:
// this is the redirect
this.context.router.push('/search');
// this should appear outside the element
LoginPage.contextTypes = {
router: React.PropTypes.object.isRequired
};
module.exports = LoginPage;
这应该工作
var Store = require('Store');
var Navigatable = require('react-router-component').NavigatableMixin
var LoginComponent = React.createClass({
mixins: [ Navigatable ],
onClick: function() {
Store.login(function(userId){
this.navigate('/user/' + userId)
}.bind(this));
},
render: function() {
return <button onClick={this.onClick}>Login</button>;
}
});