reactjs – React Router with RefluxJS – 以编程方式从商店更改路由

在我的项目中,我提议包括React Router.我的一个Reflux商店需要找出基于某些BL的路径而不是改变它.首先,我尝试在Store中包含Navigation mixin并运行this.transitionTo(“Foo”);这引发了一个错误：“Uncaught TypeError：无法读取未定义的属性’router’”.

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

但是,必须有一种方法可以通过编程方式或任何给定的外部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;

任何帮助将不胜感激！

路由器仅为组件所知(React视图).您需要将环境中的路由器作为操作中的参数传递.这样,您可以使用此参数转换到其他路径.我一直用这种方式.

我在商店里的一个动作听众中有类似下面的内容.

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