javascriptreactjsreact-router-reduxreact-router-v4react-router-dom

Is there a way to expose route params outside <Route> component?


If I have something like this:

<ConnectedRouter history={history}>
    <App />
</ConnectedRouter>

My routes config looks like:

export default [{
    path: '/',
    exact: true,
    main: Home
}, 
{
    path: '/:someId',
    exact: true,
    main: Profile
},
{
    path: '*',
    main: NotFound
}];

Where app is just a wrapper of the routes and other components like:

class App extends Component {
render() {
return (
  <div>
    <Header />
    <Switch>
      {routes.map((route, i) => <Route exact key={i} component={route.main} path={route.path}/>)}
    </Switch>
    <AnotherComponent {...this.props} />
  </div>
);
}
}

Is there a way for AnotherComponent to use match.params or to expose those? I already tried wrapping the component with withRouter and also adding it as a Route with no path to match like:

<Route component={AnotherComponent} />

And when the route is /:someId it does render both Profile and AnotherComponent, but match.params for AnotherComponent are empty :/.

Is this possible? Thanks!


Solution

  • React router will only return params if you have a path on the Route. You can pass down the params from your top level . Have that component render inside of it. It will have access to the params. As for any other time, you need to be doing:

    <Route  path="/:someId" component={AnotherComponent} />
    

    If you want it to actually get that param!

    Only children underneath the Route component can access the params. You should be building your app in such a way that only the component inside that route needs its params.