I really like the way data is handled in the advanced todos example app. I’ve created a walk-through of how to apply the container pattern used there, but with FlowRouter instead of React-Router.
The two main parts that are different is in how reactive data is passed into the route…
FlowRouter.route('/', {
name: 'homepage',
action() {
mount(AppContainer, {
content: (props) => <Homepage {...props} />
})
}
})
…and how regions are defined in a layout:
import React from 'react'
//This is the layout used by AppContainer. We are passing in the entire props object, which includes both the route regions and the reactive data from the container
export const AppLayout = (props) => {
//here, we are referencing the route region as a property of props, calling it, and then passing along the props object as an arg so that reactive data can be accessed by the component associated with this region in the route definition
return (
<div>{props.content(props)}</div>
)
}
Check it out: http://coderchronicles.org/2016/04/15/using-data-in-meteor-with-react-and-flowrouter/
Would love to hear what people think.