Make `matchRoutes` public

I’m using react-router-redux and it allows me to get at the location information but it does not augment my location with all the renderProps that the transitionManager normally provides so, I have this workaround.

https://github.com/reactjs/react-router-redux/issues/297

It accomplishes exactly what I want, in that it exposes the params based on the route config in my @@router/CHANGE_LOCATION action. Enhancing the action, if you will.

Though, I have to dig up the matchRoutes function like so import matchRoutes from 'react-router/lib/matchRoutes' and I wonder why we cannot have an API for this exact purpose.

Maybe there’s already one but I think the use case is quite clear, better yet augment the location change that is originating from history with the matched route information.

Note sure what the best course of action is here, happy to take notes.

[leidegre]

If anyone finds this a render hook could potentially be used to accomplish this.

It’s well hidden (https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md)

<Router render={props => <RouterContext {...props} />} />

It should be possible to install a higher-order component around the RouterContext this in turn could dispatch a location change action to notify the store about a route change.

[landabaso]

@taion, @leidegre and others that see this issue in the future.

I’m using the render hook but using the undocumented matchRoutes function could offer some benefits too…

When using the render hook it’s not possible to set the Redux state (in the render hook) before the rendering occurs.

For example this would trigger React errors:

  <Router history = {history} routes={routes}
  render={(props)=>{
            parsedLocation = onLocation(props, store);
          
            //This is bad   
            store.dispatch(myAction(parsedLocation));

            //However this is good:
            props.params = {...props.params, ...parsedLocation}
            return <RouterContext {...props} />;} 
/>

It’s not posible to dispatch actions since React will complain for setting the state during the render operation.

You could dispatch actions using the onUpdate hook: <Router onUpdate>, but then this is late since your components are forced to render twice.

Why setting a state based on params? Easy, params are SEO friendly stuff that do not match the internal data representation of the state. The only way to set this parsed params is to dispatch actions in componentWillReceiveProps in the components which is kind-of-ugly and forces re-rendering.

Instead, using the undocumented matchRoutes would let us set a listener on Location change and set the sate accordingly as described in the docs here:

http://redux.js.org/docs/api/Store.html#subscribe

I hate using undocumented docs . In fact, there is at least one npm package in the wild using that. See for example: https://www.npmjs.com/package/react-router-redux-params

I hope this helps someone in the future.