我对React来说还是比较新手,对于不断变化的新手来说更新,我在Google上找到有关如何处理路由和流量的信息时遇到了麻烦。
我使用Meteor堆栈,路由器(FlowRouter)有一个命令式API,用于使用FlowRouter.go('routeName, params)
转换路由。
我是否应该创建一个触发操作的链接组件,并且操作创建者调用此FlowRouter.go
方法?
它还有一个用于参数的反应式API,因此我可以观察它并在某些内容发生变化时触发操作(因此商店可以更新)。
答案 0 :(得分:0)
我在尝试使用Flux时最近的一个项目是将路由层设置为另一个商店。我创建了一个包含React View组件文件,路由器存储和路由器操作的文件夹。我正在提供以下来源:
反应查看文件:
var React = require('react');
var storeMixin = require('project/shared/helpers/storeMixin');
var RouterStore = require('../RouterStore');
module.exports = React.createClass({
mixins: [storeMixin(RouterStore)],
getInitialState: function () {
return {RouterStore: RouterStore};
},
getComponentClass: function (route) {
switch (route) {
case 'help':
return require('project/app/components/Help');
default:
return require('project/FrontPage/FrontPage');
}
},
render: function () {
var props = {
route: this.state.RouterStore.get('route'),
routeParams: this.state.RouterStore.get('params')
};
var Component = this.getComponentClass(props.route);
return <Component {...props} />;
}
});
商店档案:
var Backbone = require('backbone');
var Store = require('project/shared/libs/Store');
var conf = require('./settings');
var constants = require('./constants');
class RouterModel extends Store.Model {
constructor() {
this.defaults = {
route: conf.ROUTE_DEFAULT,
params: []
};
super();
}
initialize() {
this._router = new AppRouter(this, conf.ROUTE_ROUTES);
}
handleDispatch(payload) {
switch (payload.actionType) {
case constants.ROUTE_NAVIGATE:
this._router.navigate(payload.fragment, {
trigger: payload.trigger,
replace: payload.replace
});
break;
}
}
}
class AppRouter extends Backbone.Router {
initialize(store, routes) {
this.store = store;
var route, key;
for (key in routes) {
if (routes.hasOwnProperty(key)) {
route = routes[key];
this.route(key, route, function(/* route, args... */) {
this.emitRouteAction.apply(this, arguments);
}.bind(this, route));
}
}
// catch all non-matching urls
Backbone.history.handlers.push({
route: /(.*)/,
callback: function() {
store.set({
route: constants.ROUTE_DEFAULT,
params: []
});
}
});
Backbone.$(document).on("ready", function() {
Backbone.history.start();
});
}
emitRouteAction(/* route, args... */) {
this.store.set({
route: arguments[0],
params: [].slice.call(arguments, 1)
});
}
}
module.exports = new RouterModel();
动作档案:
var constants = require('./constants');
var dispatch = require('project/shared/helpers/dispatch');
var _ = require('underscore');
module.exports = {
navigate: function(fragment, trigger, replace) {
dispatch(constants.ROUTE_NAVIGATE, {
fragment: fragment,
trigger: _.isUndefined(trigger) ? true : trigger,
replace: _.isUndefined(replace) ? true : replace
});
}
};