CODEWITHSUNDEEP
reactjsreduxreact-routerreact-router-redux
Dan
Dan

Reputation: 5637

browserHistory.push(..) from Redux action changes URL but doesn't trigger re-render

I'm trying to do a redirect using React Router from a Redux action creator following a Fetch request.

I'm using the browserHistory approach to push from the action creator, like so:

import { browserHistory } from 'react-router';
...
browserHistory.push('/summary');

This is giving me two problems:

1) History basename is not being prefixed.

When I configured the router history, I set a basename value:

useRouterHistory(createHistory)({
    basename: '/foo'
});

However the browserHistory.push('/summary') isn't prefixing the basename to the URL. I was under the impression from the History docs (https://github.com/reacttraining/history#using-a-base-url) that it would prefix.

As a temporary workaround for the first issue, I just hardcoded my basename into the push. Which game me my next issue.

2) The URL is updated in the browser, but the page does not re-render.

If I refresh the page after the push has happened, the page then renders the correct route, but it seems that the push doesn't trigger a state change to force a render.

I did come across this react-router-redux, but reading the docs, it sounds like it shouldn't be necessary to do what I'm after:

This library is not necessary for using Redux together with React Router. You can use the two together just fine without any additional libraries. It is useful if you care about recording, persisting, and replaying user actions, using time travel. If you don't care about these features, just use Redux and React Router directly.

Can anyone see where I'm going wrong? I'm sure it's just something I'm missing rather than a bug.

I'm currently using:

Upvotes: 0

Views: 1454

Answers (2)

Sseon
Sseon

Reputation: 3

In my case, there was an error in the page before the move. It was an error related to lifecycle. After correcting the error, we confirmed normal operation. Be especially careful with componentWillUnmount. Otherwise, look at routerReducer and syncHistoryWithStore.

Upvotes: 0

Alex Parij
Alex Parij

Reputation: 1286

In order to reload your page on an url change, the page component needs to receive the history or location props from react-router. so add one or another in your props.

Upvotes: 1

Related Questions