christoefar christoefar - 1 month ago 28
React JSX Question

Problems using a custom history in react-router 2.0.0

Specifically I want to use the "basename" option so I can run my application in a sub directory.

I have the following code to set-up the history.

var createHistory = require('history').createHistory;
var useRouterHistory = require('react-router').useRouterHistory;
var browserHistory = useRouterHistory(createHistory)({
basename: "/subfolder"
});


I then have the following to route config

<Router history={browserHistory} className="react-container">
<Route path="/" component={Template}>
<IndexRoute component={Diary} />
<Route path="diary(/:zoom)" component={Diary} />
<Route path="login" component={Login} />
</Route>
</Router>


I can route without any problems in the components themselves using:

this.context.router.push('login');


But when I try and push a new route to the history in a flux store it doesn't work. It will change the URL in the address bar to the correct value, but the component will not change.
I can refresh the page and it loads as expected.

For example I can use:

//require browser history in store
var browserHistory = require('react-router').browserHistory;
....
//after login
browserHistory.push('/');


I would expect the "Diary" component to load, but instead it changes the URL to /subfolder and the component stays as the login page.

The routing all works correctly if I just use

require('react-router').browserHistory


instead of the custom code, but I then can't run the application in a sub directory like I need.

Thanks in advance for any help and tips you can give me.
Chris

Answer

In your Flux store, you need to make sure to use the same history object that you set up for your router.