Redux router state to have same shape as react-router props

I’m working on an app that has a page route that looks like:

/:USERNAME/photos/:PHOTO_ID

Before, I was using react-router-dom without redux, so when I needed to access those params I would get them from this.props.match which has a rich mapping of the current route.

{
  isExact: true,
  params: {
    USERNAME: "paul"
    PHOTO_ID: "123"
  },
  path: "/:USERNAME/photos/:PHOTO_ID",
  url: "/paul/photos/123",
}

The issue is if other parts that the app need these variables it’s not clear how to share them. Enter Redux. However, using the react-router-redux binding I see that the state that’s returned looks like:

{
  hash: "",
  key: "057zsw",
  pathname: "/paul/photos/123",
  search: "",
  state: undefined
}

There should be more info in the state similar to the match object passed down to components by react-router-dom. I could make a custom function to parse the parameters but that would be duplicating the work that’s already being done by react-router-dom. Thoughts?

[tylercrosse]

A workaround I’ve used is to create a selector (ala reselect) and pull out the ‘params’ via a regex. This smells bad / feels hacky to me though. Having multiple Route components per ‘page’ is a cool idea, but in practice >95% of the time I just want a single match per route. YMMV 🙃

import { createSelector } from 'reselect'

const crewDataSelector = state => state.crews.data;
const pathnameSelector = state => state.router.location.pathname;

const crewIdSlector = createSelector(
  pathnameSelector,
  pathname => {
    const matches = pathname.match(/crew\/(\d+)/)
    if (matches) return matches[1];
  }
)

const currentCrewSelector = createSelector(
  crewIdSlector,
  crewDataSelector,
  (crewId, crewData) => crewData.crewId
)

export default currentCrewSelector

[purplecones]

I came across this same scenario. Has anyone been able to figure out a more elegant solution?

I ended wrapping my component with withRouter prior to connecting it to redux.

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(MyComponent));

This adds a bunch of unused props to my component but works for now.