加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 09:30:27 所属栏目:百科 来源:网络整理
导读:在我的项目中,我提议包括React Router.我的一个Reflux商店需要找出基于某些BL的路径而不是改变它.首先,我尝试在Store中包含Navigation mixin并运行this.transitionTo(“Foo”);这引发了一个错误:“Uncaught TypeError:无法读取未定义的属性’router’”.
在我的项目中,我提议包括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
        });
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读