How to pass additional data to route?

Question

I have a bunch of react-router routes that look like this:

<Route path="/users" component={UsersIndex} exact />
<Route path="/users/new" component={UsersNew} />
<Route path="/users/:id" component={UsersEdit} />
<Route path="/posts" component={PostsIndex} exact />
<Route path="/posts/new" component={PostsNew} />
<Route path="/posts/:id" component={PostsEdit} />
<Route path="/blogs" component={BlogsIndex} exact />
<Route path="/blogs/new" component={BlogsNew} />
<Route path="/v/:id" component={BlogsEdit} />

I'm accessing route information via the location object using withRouter. I would like to be able to know which "area" I'm in at any time. I can do this currently by seeing if the route starts with a certain value (eg. "/users") but this seems hacky. I'd like to be able to pass additional information - in this case, area - when I define each Route? Or perhaps there's a better way to do this?

Answer 1

You can pass additional props to a component, but you'll need to change your route definitions to use render instead of component:

<Route path="/users" render={props => <UsersIndex {...props} area="users" />} exact />
<Route path="/posts" render={props => <PostsIndex {...props} area="posts" />} exact />
<Route path="/blogs" render={props => <BlogsIndex {...props} area="blogs" />} exact />