React meteor -> router -> container -> layout -> page structure question

Hi there,

My question is - assuming I have several pages that provide lists of data (e.g. users) or a single items information (e.g. user) what is the best way to structure my react router -> containers -> layouts -> pages -> components.

(i’m basing my project roughly from this

E.g. login, register, users, users/john, galleries, galleries/1 etc

Currently I have the following:

Route path="/" component={AuthContainer}
–> index route and routes for login, register, reset password etc
Route path=“app” component={AppContainer}
–> routes for pages like users, users/john, tasks, galleries, galleries/1 etc

AuthContainer just gets the user and connection state and imports AuthLayout.

AuthLayout which in it’s render method uses React.cloneElement and ReactCSSTransition group to show a simple login form / register form based on the users url

AppContainer will subscribe to the collections and fetch them and load AppLayout
e.g. Meteor.subscribe(‘tasks’); return { tasks: Tasks.find().fetch() }

AppLayout checks the user is authenticated (and if not redirects to login page) and otherwise clones the children, passes in props, and again uses ReactCssTransitionGroups as a user navigates throughout the pages.

So what I’m not sure is what is the best way to use containers for reach of my pages. I don’t like the idea of AppContainer subscribing and fetching all of the various collections. However having a container for each page (e.g. Tasks, Tasks/abc, Users, Users/john) seems overkill plus can I even have containers inside containers (ReactRouter)?

Route path=“app” component={AppContainer}
–> Route path=“users” component={UsersContainer}
----> Route path=“users/*” component={UserDetailContainer}

I want all my authenticated pages to have the same layout and use ReactCssTransitionGroup to have a simple nice fade when a user navigates to different pages.

Any help is much appreciated

Kind regards