使用 RefluxJS 反应路由器 - 以编程方式从商店更改路由答案

【问题标题】：React Router with RefluxJS - Changing route Programmatically from a Store使用 RefluxJS 反应路由器 - 以编程方式从商店更改路由
【发布时间】：2015-08-30 21:53:33
【问题描述】：

在我的项目中，我决定加入 React Router。我的 Reflux 商店之一需要根据一些 BL 找出路径，然后更改它。首先，我尝试在 Store 中包含 Navigation mixin 并运行 this.transitionTo("Foo");，这会引发错误：“Uncaught TypeError: Cannot read property 'router' of undefined”。

有人建议：“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;

任何帮助将不胜感激！

【问题讨论】：

标签： reactjs react-router refluxjs

【解决方案1】：

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

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

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

【讨论】：

我个人认为组件更应该对一些 store 状态做出反应来决定是否过渡。因此，在处理完操作后存储会更新，并且组件会像往常一样监听存储更改。根据存储数据的某些条件，组件转换到不同的路由。
是的，这当然是可能的。 react-router 网站上曾经有一个关于在 Flux 旁边使用它的指南，它提到有一个路由存储：github.com/rackt/react-router/blob/…

【解决方案2】：

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

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

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

【讨论】：