Question

我对React来说还是比较新手，对于不断变化的新手来说更新，我在Google上找到有关如何处理路由和流量的信息时遇到了麻烦。

我使用Meteor堆栈，路由器（FlowRouter）有一个命令式API，用于使用FlowRouter.go('routeName, params)转换路由。

我是否应该创建一个触发操作的链接组件，并且操作创建者调用此FlowRouter.go方法？

它还有一个用于参数的反应式API，因此我可以观察它并在某些内容发生变化时触发操作（因此商店可以更新）。

Answer 1

我在尝试使用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
        });
    }
};

助焊剂如何处理路由？

1 个答案: