Route loaded twice

[lauterry]

Hello

I have actually an issue with my isomorphic react application. There is also code splitting with webpack.

I have been able to reproduce my issue with your project by modifying the render function of client.js

let render = () => {
  // We need to have a root route for HMR to work.
  const createRoutes = require('./routes/root').default;
  const routes = createRoutes(store);

  // Pull child routes using match. Adjust Router for vanilla webpack HMR,
  // in development using a new key every time there is an edit.

    // Render app with Redux and router context to container element.
    // We need to have a random in development because of `match`'s dependency on
    // `routes.` Normally, we would want just one file from which we require `routes` from.
    ReactDOM.render(
      <Provider store={store}>
          <Router routes={routes} history={browserHistory} key={Math.random()}/>
      </Provider>,
      container
    );
};

The problem can been seen by enable Network Throttle (Regular 3G).
Go to the page http://localhost:5000/post/hows-business-boomin and you can seen a blink of the page.
The page is displayed once thank to server rendering et then a second time and this is the problem.

It seems that the react-router client side a rendering the route again.

Have you been able to experience the same issue ? Can you explain me why plz ?

Why did wrapped the ReactDOM.render function into match({ routes, location }, () => {} by the way ?

Best regards

[lauterry]

Ok, I just read this documentation - https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md#async-routes
and it solves my issue.

When I first read this documentation, I didn't understand the asyn-routes section until I encountered this issue.

[jaredpalmer]

Are you still seeing the double-load?

[lauterry]

No more double load 👍

[Risbot]

I have the same problem, Can you write how you fixed it?