使用RefluxJS的React路由器-以编程方式从存储中更改路由

Question

在我的项目中，我决定包含React Router。我的一个回流店需要根据一些BL找出路径，然后更改它。首先，我尝试在存储中包含Navigation混合，并运行this.transitionTo("Foo");，它抛出了一个错误：“未捕获TypeError:无法读取未定义的属性'router‘”。

有人建议："this.transitionTo可能正在通过RefluxJS商店中不存在的上下文(this.context.router)访问路由器属性“……我能理解。

然而，必须有一种方法以编程方式从Store或任何给定的外部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;

​

任何帮助都将不胜感激！

Answer 1

路由器仅为组件(React视图)所知。您需要在操作中将路由器作为参数从上下文中传递。这样，您就可以使用此参数转换到不同的路由。我一直都是这么用的。

我在一家商店的一个动作监听器中有类似下面的内容。

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

Answer 2

回流操作返回一个promise，所以你可以在你的组件中这样做，而不是在商店中这样做(这是错误的)：

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

这是否完全正确..。嗯，我不确定社区是否真的达成了一致意见。