4

在我的项目中，我决定包含 React Router。我的一家 Reflux Stores 需要根据一些 BL 找出路径，然后更改它。首先，我尝试Navigation在 Store 中包含 mixin 并运行this.transitionTo("Foo");它引发错误：“未捕获的类型错误：无法读取未定义的属性‘路由器’”。

有人建议：“可能是通过RefluxJS 商店中不存在的this.transitionTo上下文 () 访问路由器属性”......我理解。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;

任何帮助将不胜感激！

4

2 回答 2

1

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

我在商店的一个动作监听器中有类似下面的东西。

 _onMyAction: function (router) {
    MyApi.doSomething()
        .then(function (id) {
            // do something ...
            router.transitionTo('myNewRoute', { ref: id });
        })
        .catch(function(message) {
            // handle message
        });
}
于 2015-06-16T20:53:52.017 回答
0

回流操作返回一个承诺，因此您可以在您的组件中执行此操作，而不是在商店中执行此操作（IMO 是错误的）：

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

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

于 2015-06-15T13:45:28.797 回答