Location state absent in LOCATION_CHANGE action

[fzaninotto]

React-router uses history's location object:

The location object implements a subset of the window.location interface, including:

• location.pathname - The path of the URL
• location.search - The URL query string
• location.hash - The URL hash fragment

Locations may also have the following properties:

• location.state - Some extra state for this location that does not reside in the URL (supported in createBrowserHistory and createMemoryHistory)
• location.key - A unique string representing this location (supported in createBrowserHistory and createMemoryHistory)

(see https://github.com/ReactTraining/history#listening)

connected-react-router only passes pathname, search and hash fields to the LOCATION_CHANGE action, and ignores the state and key fields.

connected-react-router/src/ConnectedRouter.js

Lines 28 to 49 in 37e90d7

	const {
	pathname: pathnameInStore,
	search: searchInStore,
	hash: hashInStore,
	} = getLocation(store.getState())
	// Extract history's location
	const {
	pathname: pathnameInHistory,
	search: searchInHistory,
	hash: hashInHistory,
	} = history.location
	// If we do time travelling, the location in store is changed but location in history is not changed
	if (pathnameInHistory !== pathnameInStore || searchInHistory !== searchInStore || hashInHistory !== hashInStore) {
	this.inTimeTravelling = true
	// Update history's location to match store's location
	history.push({
	pathname: pathnameInStore,
	search: searchInStore,
	hash: hashInStore,
	})
	}

As a consequence, a link using location state like this:

<Link to={{ pathname: '/hello', state: { foo: 'bar' } }}>Hello</Link>

Is translated by connected-react-router as the following action:

{
  type: '@@router/LOCATION_CHANGE',
  payload: {
    location: {
      pathname: '/hello',
      search: '',
      hash: ''
    },
    action: 'POP',
    isFirstRendering: false
  }
}

Notice the missing state key in the location.

As a consequence, reducers can't use the value passed in the state.

Note that this was properly handled by react-router-redux.

[nefil1m]

@supasate any update on this? It looks like the fix is pretty simple and I'm not sure why the issue is stale for so long

[rob2d]

Update? @fzaninotto has a solution in his PR which looks pretty intuitive. Right now, otherwise, requiring a bit of over-engineering to use route params within reducers or actions which isn't great (especially for cross-OS/react native systems). This is about 65% of the reason I just added connected-react-router (though in fairness I should've done my research before choosing... but adding this would be very nice/empathetic on the part of the maintainers 😛 ).

[digicontributer]

Please review this.