Redirecting programatically using React Router with Flux

Question

I am currently working on a project using NodeJS, Express, Flux and React, along with React Router for client side routing.

I may have the wrong idea of how the process should be working, but I am currently attempting to redirect the user to the home screen following a successful login. Unfortunately a lot of examples I'm finding for React Router are for Pre-Version 1.0 and are now irrelevant, or are in ES6 which I am not currently writing in so I have been trying to follow examples and tie things together as best I can.

My code is below -

//    main.js
var React = require('react/addons');
var Components = require('./components');
var Flux = require('./flux');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var RouterStore = require('./flux/stores/RouterStore.js');
var routes = require('./routes.js');


var AppRouter = React.render(<Router>{routes}</Router>, document.getElementById('render-target'));
RouterStore.setRouter(AppRouter);

/

// routes.js
"use strict";

var React = require('react');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;

var routes = (
    <Router>
<Route path="/" component={require('./components/pageComponents/HomePage.jsx')} />
<Route path="item(/:id)" component={require('./flux/viewComponents/Item_ViewComponent.jsx')} />
<Route path="login" component={require('./flux/viewComponents/Login_ViewComponent.jsx')} />
</Router>
)

module.exports = routes;

At this point, after following examples and gleaning information from sources like the one here Automatic redirect after login with react-router

I thought I should then be able to call transitionTo on the router object that is now in my store. However this method is not defined, and nor is it defined on any of the other objects I have created.

Am I fundamentally thinking about this the wrong way? Or have I simply combined one too many examples and fudged the configuration?

Thanks

score 3 · Accepted Answer · edited Feb 04 '16 at 19:27

This answer is for react-router <1.0, I've added the same implementation in 1.0 further down

You are correct in using the RouterStore to set the instance of the router, so you can grab it later and perform the transition.

I've worked with this implementation (before upgrading to react-router 1.0) I've done it in ES6, but I'll try to do it in ES5, however I've not tested it :)

var Router = require('react-router')
var HistoryLocation = Router.HistoryLocation
var routes = require('./routes.js')
// You have a routeStore, i just use an exportable object with a getter and setter
var RouterContainer = require('./RouterContainer')

var router = Router.create({routes:routes, location:HistoryLocation})
RouterContainer.set(router)

router.run(function(handler) {
React.render(<Handler />, document.body)
})

My RouterContainer simply looks like this

var _router = null
var o = {
set: function(router) { _router = router },
get: function() { return _router }
}

So now, where I check the login (in a store in my case) I simply require the RouterContainer and perform the transition

var RouterContainer = require('./RouterContainer')
RouterContainer.transitionTo('home')

I hope this helps, again, im not sure I've hit the correct implementation in ES5, I haven't written code like that in a long time :)

The same idea in react-router 1.0

var Router = require('react-router')
var routes = require('./routes)
var History = require('./History)

React.render(
<Router history={History}>{routes}</Router,
document.getElementById("app")
)

History.js

var createBrowserHistory = require('history/lib/createBrowserHistory')
module.exports = createBrowserHistory()

This means you can now require the History outside components by:

var History = require('./History')
History.pushState(null, ´/url/´)

Redirecting programatically using React Router with Flux

1 Answers1