React-Router v3 handling Child Routes data fetch - react-router

Question

I am really struggling with ChildRoutes in react-router and any help direction would be much appreciated.
I want to define my routes something in this manner.
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="about" component={About}/>
<Route path="users" component={Users}>
<Route path="/user/:userId" component={User}/>
</Route>
<Route path="*" component={NoMatch}/>
</Route>
</Router>
The main problem is with Users. So when user hits /users I load all the users from API.
And when he navigates to users/1 , I would read the data from Users state by getting the userId from routeParams and the fetch details of user 1.
I want the Child Routes to work as say if someone pastes the URL /users/1 directly in the browser then the route would still load my Users component which will load all the users and the waterfall flow will continue.
Now here is my issue , the user detail is completely a new page in my app, so even though the router loads Users compoennt I want to navigate and render User component if my URL exactly matches the pattern /users/:userId. I am not sure how I can achieve this with react-router v3.0.4 . So happy path is first component Users get loaded and then when user is clicked the path changes to users/:userId and the User Component renders.
But the complicated path is when someone loads users/:userId directly in the browser the Users component should get mounted and then based on the location.path the User component should get rendered.
Again Any help with this would be much appreciated.
Thanks

Answer 1

Why don't you create a parent component User that loads the data on entry, then put UserProfile (or whatever this is loading) as a child component... it would look something like this:
import React, { Component } from 'react';
const mapDispatchToProps = {
getDate: someAction.getData
}
#connect(state => state, mapDispatchToProps);
export default class User extends Component {
componentWillMount() { ...loadData }
render() { return {...this.props.children} }
}
Then in your routes
<Route path="users" component={Users}>
<Route path="user" component={User}>
<Route path="/:id" component={UserProfile} />
</Route>
</Route>
I could have gone in more detail here, but I think I explain the general concept. Let me know how it goes!
Using this method you can guarantee data is loaded every time.