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!
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.