Unable to render nested route using redux and react-router

[gz2432]

Not sure if I am doing something wrong but having issues with getting nested route to render on server side so far.

I have the following routes:

  <Route path="/" component={App}>
    <Route path="/login" component={Login} />
  </Route>

When I do curl http://localhost:3000/login the login component is not present in the html. On client side the login component is rendered as expected.

Here's how I am exporting the root element:

const routes = createRoutes();

if (typeof ISOMORPHIC_WEBPACK === 'undefined') {
  // Browser environment
  const initialState = window.__INITIAL_STATE__;
  const store = configureStore(initialState, browserHistory);
  const history = syncHistoryWithStore(browserHistory, store);

  ReactDOM.render(
    <Provider store={store}>
      <Router history={history}>
        {routes}
      </Router>
    </Provider>,
    document.getElementById('app'));
}

export default (
  <Provider store={configureStore()}>
    <Router history={createMemoryHistory()}>
      {routes}
    </Router>
  </Provider>
);

In server.js:

const {
  evalBundleCode,
} = createIsomorphicWebpack(webpackConfig, {
  nodeExternalsWhitelist: [
    /^react\-router/,
    /^history/
  ]
});
...
app.get('/*', (req, res) => {
  const requestUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
  const myApp = ReactDOMServer.renderToString(evalBundleCode(requestUrl).default);
  res.status(200).send(renderFullPage(myApp));
});

[gz2432]

Looks like this was user error. Issue went away after using browserHistory and the same store for both client and server renders. Closing this.

[glortho]

@georgezhu01 Are you doing any preloading of data for the server render? Curious how one can accomplish this with isomorphic-webpack. cc @gajus