Question

在我的项目中，我希望包含React Router。我的一个Reflux商店需要找出基于某些BL的路径而不是改变它。首先，我尝试在商店中加入Navigation mixin并运行this.transitionTo("Foo");，这会引发错误：＆＃34;未捕获TypeError：无法读取属性＆＃39; router＆＃39;未定义＆＃34;。

有人建议：＆＃34; this.transitionTo可能通过上下文（this.context.router）访问路由器属性，而这些内容在RefluxJS商店中并不存在。 ......我明白了。

但是必须有一种方法可以通过编程方式或任何给定的外部JS模块更改路由器路径。

我的代码是这样的：

＆＃13;

// 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;

＆＃13;

任何帮助将不胜感激！

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

Reflux操作会返回一个承诺，所以不要在商店中执行此操作（IMO错误），您可以在组件中执行此操作：

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

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

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

2 个答案: