React-router: Feature request: support StaticContext in react-router-redux

Created on 12 Jul 2017  路  3Comments  路  Source: ReactTraining/react-router

I am using StaticRouter with server side rendering. I use the context object to set the return code of the server. (to send 404).

However ConnectedRouter only connects the default Router not the StaticRouter. Reading the source code it seems like we only need to set the child context.

v5 alpha 6

Most helpful comment

You definitely need the StaticRouter to do server rendering. There is no other way to define the staticContext which you need to set http response code.

All I need the ConnectedRouter for is to ensure the location is stored in the redux store. To work around the issue I removed the ConnectedRouter and just dispatched a location change event myself (just like the ConnectedRouter):

import { LOCATION_CHANGE } from 'react-router-redux';
import createHistory from 'history/createMemoryHistory';

function doIt() {
  const store = createStore();

  store.dispatch({
    type: LOCATION_CHANGE,
    payload: history.location,
  });
  ...
}

This works and had the added benefit that the url is available in redux before server side data fetching occurs. (I'm using react-router-config for that)

All 3 comments

You should use a memory history on the server. This is exactly what v3/2 did with match.

Syncing a StaticRouter doesn't make sense because it never changes the location. It stubs out a fake history to do this, so we can't integrate with something that is intentionally incomplete.

Interesting since the server rendering guide shows you need to use the StaticRouter. But I'll try it out and report back.

You definitely need the StaticRouter to do server rendering. There is no other way to define the staticContext which you need to set http response code.

All I need the ConnectedRouter for is to ensure the location is stored in the redux store. To work around the issue I removed the ConnectedRouter and just dispatched a location change event myself (just like the ConnectedRouter):

import { LOCATION_CHANGE } from 'react-router-redux';
import createHistory from 'history/createMemoryHistory';

function doIt() {
  const store = createStore();

  store.dispatch({
    type: LOCATION_CHANGE,
    payload: history.location,
  });
  ...
}

This works and had the added benefit that the url is available in redux before server side data fetching occurs. (I'm using react-router-config for that)

Was this page helpful?
0 / 5 - 0 ratings