React路由器与RefluxJS - 从商店以编程方式更改路由

在我的项目中，我除去了包括React路由器。我的一家Reflux Stores需要根据一些BL来计算出路径，而不是改变它。首先，我尝试了在商店中包含Navigation mixin，并运行this.transitionTo("Foo");，它抛出了一个错误：“Uncaught TypeError：无法读取未定义的属性”路由器“。React路由器与RefluxJS - 从商店以编程方式更改路由

有人建议：“this.transitionTo可能通过在refluxJS商店中不存在的上下文（this.context.router）访问路由器属性”......我理解。

但是，必须有一种方法来从编程存储或任何给定的外部JS模块更改路由器路径。

我的代码是这样的：

// routes.js 
 
////////////////////////////////////////////////////////// 
 
var Router = require('react-router'); 
 
var Route = Router.Route; 
 
var App  = require('./app'); 
 
var Comp = require('./components/comp'); 
 

 
var routes = (
 
    <Route path='/' handler={App}>  
 
     <Route name='Foo' path='/foo' handler={Comp}/>    
 
    </Route> 
 
); 
 

 
module.exports = routes; 
 

 
// main.js 
 
////////////////////////////////////////////////////////// 
 
var React = require('react'); 
 
var Router = require('react-router'); 
 
var routes = require('./Routes'); 
 

 
var appElement = document.getElementsByTagName('body'); 
 

 
Router.run(routes, Router.HistoryLocation, function(Root, state) { 
 
    React.render(<Root params={state.params} query={state.query} />, appElement); 
 
}); 
 

 
// comp.js 
 
////////////////////////////////////////////////////////// 
 
var React  = require("react"); 
 
var Reflux  = require("reflux"); 
 
var Actions = require("../actions/actions.js"); 
 
var SomeStore = require("../stores/some-store.js"); 
 

 
var Comp = React.createClass({ 
 

 
    render: function() { 
 
     return (
 
      <h1>Hello World</h1>  
 
     ); 
 
    } 
 
}); 
 

 
module.exports = Comp; 
 

 
// store.js 
 
////////////////////////////////////////////////////////// 
 
var SomeStore = Reflux.createStore({  
 

 
    onSomeAction: function() { 
 
     // CHANGE ROUTER PATH HERE TO /foo 
 
    } 
 

 
}); 
 

 
module.exports = SomeStore;

任何帮助将不胜感激！

来源

2015-06-15 sergelerner

回流动作返回一个承诺，所以不是在店里做的（这IMO是错误的），你可以做你的组件：

Actions.someAction().then(function() { 
    // route transition 
});

这是否是完全正确的...好，我不确定社区是否真的解决了意见。

来源

2015-06-15 13:45:28

我个人认为组件应该对某些存储状态做出反应，以确定是否转换。因此，在处理操作之后，存储更新，并且组件像往常一样监听存储更改。基于关于商店数据的一些条件，组件转换到不同的路线。 –

是的，这当然是一种可能性。曾经在反应路由器网站上提供关于使用它与flux相关的指南，并提到了路由存储：https://github.com/rackt/react-router/blob/f3a44f1bc898848d553c39e7aa53a70d0e91ec11/docs/guides/flux.md ＃访问路由和-PARAMS - 从行动创造者 –

路由器仅由组件知道（反应视图）。您需要从上下文中将路由器作为参数传递给您的操作。这样，您可以使用此参数来转换到不同的路线。我一直在用这种方式。

我在商店中的某个动作侦听器中有类似下面的内容。

_onMyAction: function (router) { 
    MyApi.doSomething() 
     .then(function (id) { 
      // do something ... 
      router.transitionTo('myNewRoute', { ref: id }); 
     }) 
     .catch(function(message) { 
      // handle message 
     }); 
}

来源

2015-06-16 20:53:52

React路由器与RefluxJS - 从商店以编程方式更改路由

回答

相关问题