How should flux handle routing? - reactjs

Question

I'm fairly new to React and even more new to flux and i'm having troubles finding info on Google about how to handle routing and flux.
I'm using the Meteor stack and the router (FlowRouter) has an imperative API for transitioning routes using FlowRouter.go('routeName, params).
Should I create a Link component that triggers an action and the action creator calls the this FlowRouter.go method?
Also it has a reactive API for the params so I can watch it and trigger an action if something changes (so stores can update).

Answer 1

An approach I took with a recent project while experimenting with Flux was to make the routing layer just another store. I made a Folder that contained React View Component File, Router Store and Router Actions. I am Providing The source Below:
React View File:
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} />;
}
});
The Store File:
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();
The Actions File:
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
});
}
};