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 https://github.com/meteor/todos/tree/react/imports/ui)
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)?
E.g.
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
Shaun