How can I access the closest 's match inside children?

Question

I'm rendering with ReactDom in an index.js file.

ReactDOM.render(
    <Provider store={store}>
        <HashRouter>
            <Route path="/:myParam">
                <Switch>
                    <SomeProvider myParam={HOW_TO_ACCESS_MY_PARAM_HERE}>
                        <Route path="/:myParam/home" component={Home}/>
                        <Route path="/:myParam/test" component={MyTest}/>
                    </SomeProvider>
                </Switch>
            </Route>
        </HashRouter>
    </Provider>,
    document.getElementById('root')
);

I'm looking a way to pass route param as a prop to SomeProvider

There's always myParam and it's avaiable in Home and MyTest components as this.props.match.params.myParam, but I need to access it inside children of first Route.

Is there a way I can get it there? In an entry point file, not component.

Answer 1

You can access match from any child of a <Route> by using withRouter:

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

class SomeProvider extends Component {
  ...
  render() {
    const myParam = this.props.match.params.myParam;
    ...
  }
}

export default withRouter(SomeProvider)

In doing so, you won't need to pass myParam as a prop.