Router unwanted replace on lazy load route

[topheman]

I'm using the following:

history@1.13.1
react@0.14.3
react-redux@4.0.0
react-router@1.0.2
redux@3.0.4
redux-router@1.0.0-beta5

My problem: I implemented lazy load of components with react-router & require.ensure from webpack on the /lazy route. It's working great.

When I access directly (first load) the #/lazy route, I'm correctly routed to the right component, but the url is replaced by #/, so if I reload, I won't be routed on the same way as I first landed. Is it standard behavior ? Did I mess up with the route declaration ?

As you'll see on the screencast, it seems that redux-router is making "REPLACE" instead of "POP" (or is it comming from history ?...) any advice welcome.

Here is a screencast: http://recordit.co/GR83qZnw9u

This is testable at https://topheman.github.io/react-es6-redux (hit the button "I'm a developer", you'll even have sourcemaps, redux-dev-tools and logging).

My routes:

const lazyRouteLoader = (location, cb) => {
  require.ensure([], (require) => {
    cb(null, require('./containers/Lazy/Lazy'));
  });
};

const lazyHomeRouteLoader = (location, cb) => {
  require.ensure([], (require) => {
    cb(null, require('./containers/LazyHome/LazyHome'));
  });
};

export default (
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="github" component={Github}/>
    <Route path="github/user/:username" component={GithubUser}/>
    <Route path="redux" component={Redux}/>
    <Route path="lazy" getComponent={lazyRouteLoader}>
      <IndexRoute getComponent={lazyHomeRouteLoader}/>
    </Route>
  </Route>
);

My configuration of the reduxReactRouter view source:

const storeEnhancers = [
  reduxReactRouter({
    createHistory,
    routerStateSelector: state => ({
      location: {
        pathname: undefined
      },
      routes: [],
      params: {},
      components: [],
      ...state.router
    })
  })
];

You can find the code of the project I'm talking about on this branch: https://github.com/topheman/react-es6-redux , more specificly on this commit: https://github.com/topheman/react-es6-redux/commit/3cef4082c488bcdefa841de176e1c564c3e0550c

[mjrussell]

@topheman Was curious because I implemented the same thing recently and don't have this issue. Pulled it down and changed:

const storeEnhancers = [
  reduxReactRouter({
    createHistory,
    routerStateSelector: state => ({
      location: {
        pathname: undefined
      },
      routes: [],
      params: {},
      components: [],
      ...state.router
    })
  })
];

to

const storeEnhancers = [
  reduxReactRouter({
    createHistory,
  })
];

And it worked like a charm. You do get some errors in the console but those should be fixed by #202

[topheman]

It works, but then, I get the following warnings when I directly access /lazy:

It was the reason I put that in the first place.

[mjrussell]

@topheman See the PR I linked #202

[topheman]

Thanks @mjrussell this should fix my problem (and obviously I wasn't the only one), I tried to fix it an other way but ran into an other bug.

Any ETA on the next release on npm ?

[Scarysize]

@topheman I will try to get one out today.

[mjrussell]

Found an issue where #202 didn't fully solve the problem, put in #220 to address it.

[Scarysize]

@topheman I lied :/ We still have some todos before the next npm publish. Sorry!

[topheman]

@Scarysize you're doing a great work! Thank you for that. I will wait for it.