CODEWITHSUNDEEP
reactjsreact-router
Chris Child
Chris Child

Reputation: 65

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

Upvotes: 2

Views: 1303

Answers (2)

Bo Chen
Bo Chen

Reputation: 727

I am having exactly the same issue now with [email protected]

the url in address bar gets updated correct, but nothing happens on UI. If I hit F5, it will work

still investigating on this....

Upvotes: 0

taion
taion

Reputation: 2837

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

Upvotes: 2

Related Questions