search

RyanWarner / supernova

Universal React boilerplate. React, Firebase, Node, Express, Webpack, Styled Components.
7 stars 3 forks source link

Modal doesn't have access to route params #15

Closed LaithAzzam closed 4 years ago

LaithAzzam commented 5 years ago

when on a non root route, Modal doesn't have an understanding of where the application is

romansorin commented 4 years ago

Assuming this hasn't been fixed, this can be alleviated by wrapping the modal component in the withRouter(connect(mapStateToProps)(component)) HOC.

RyanWarner commented 4 years ago

The reason for this is due to the modal being at the root level in the routing tree. Simply wrapping the modal in withRouter HOC will not work, as match.params doesn't have access to nested route params.

The correct way to go about this is to use matchPath.

import { matchPath } from 'react-router-dom'

const match = matchPath(location.pathname, {
  path: '/users/:id'
})

const { id } = match.params

https://stackoverflow.com/questions/45487779/how-to-get-params-in-parent-route-component