react-route's onEnter handler called twice

[semurgx]

I've found, that applying current react-router-redux (4.0.7) causes twice calling react-router's asynchronous (with 3 arguments) onEnter handler while initial loading. Here is a gist, describing this issue https://gist.github.com/semurgx/9abb0d02ea49f49aa97ef34cac117f5f .

[wphampton]

I'm seeing this as well since upgrading this week, though in a different scenario, not on the initial page render but at other times in the application after a push. Also, for me I only see it with hash history (I see you are using browser history). Also, using the example from your gist, if you don't put a setTimeout in there then it only gets called once. It's interesting that even a setTimeout value of zero causes it to be called twice.

const handleEnter = (nextState, replace, cb) => {
    console.log('whoa! called twice');
    //setTimeout(cb, 500); <-- will cause onEnter to be called twice
    //setTimeout(cb, 0); <-- will cause onEnter to be called twice
    cb(); // <-- Will cause onEnter to be called only once
};

I recently upgraded a number of packages along with this one and can't figure out what is causing this. With react-router-redux 4.0.7 comes react-router v.3 and history v.3 but even when I fall back to previous versions I can't get it back to how it used to be, which makes me think I'm missing something else here, maybe another supporting package or something else I blindly upgraded and can't identify.

In the meantime I am planning to use a debouce on my onEnter function...

[hilkeheremans]

Experiencing exactly the same issue. Also working around using debounce for now.

[mofelee]

Delete this line can fix this issue.

react-router-redux/src/sync.js

Line 130 in 3dfbdde

listener(lastPublishedLocation)

[semurgx]

Another way to fix this issue:
wrap

react-router-redux/src/sync.js

Line 102 in 3dfbdde

handleLocationChange(history.getCurrentLocation())

line with isTimeTravelling = true and isTimeTravelling = false.

[gerhardsletten]

I did also had this issue and I fixed it by downgrading react-router to 2.x

[amarinov]

I stumbled upon this issue as well. Seems like a serious one to me. A downgrade to 4.0.6 fixed it for the time being.

[tvanro]

Encountered the same issue and I implemented a workaround with shouldComponentUpdate for this:

export default class RootRoute extends Component {

  render() {
    // Create an enhanced history that syncs navigation events with the store
    const history = syncHistoryWithStore(browserHistory, store)
    return (
      <Router history={history}>
        <Route component={App}>
          <Route path="/foo" component={Foo} />
          <Route path="/bar" component={Bar} />
        </Route>
      </Router>
    );
  }
}

export default class App extends Component {

  shouldComponentUpdate(nextProps) {
    // performance workaround until react-router-redux fixes https://github.com/reactjs/react-router-redux/issues/481
    return nextProps.location.action === 'POP';
  }

  render() {
    return (
      <h1>Hello Word!</h1>
    );
  }
}

[neverfox]

Oh man, I was pulling my hair out because my injected sagas (in onEnter) were running twice and I thought I had messed up somewhere. Reverted to 4.0.6 and the problem went away.