reactjs - Configuring Iron Router in Meteor - React -

using meteor 1.2.0.1 , react. simple app works great needed iron router.

app layout:

client\   app.jsx lib\   router.jsx server views\   home.jsx   layout.jsx 

home.jsx:

home = react.createclass({   render() {     return (       <div>         <h3>hello world</h3>         <p>from home</p>       </div>     );   } }); 

layout.jsx:

layout = react.createclass({   render() {     return (       <div>         {this.props.children}       </div>     );   } }); 

routes.jsx:

router.route('/', () => {   let page = (     <layout>       <home/>     </layout>   );   react.render(page, document.body); }); 

surely enough, in app.jsx, works great displays body of html setup not work multi-page app need routes. inside is:

meteor.startup(() => {   let app = (     <layout>       <home/>     </layout>   );   react.render(app, document.body); }); 

the question is, how iron router (routes.jsx) show contents?

i recommend using flow router instead of iron router. add flow router app, add kadira:react-layout well. follow format , should work:

flowrouter.route('/', {   name: 'home',   action() {     reactlayout.render(layout, {content: <home />});   } });  flowrouter.route('/login', {   name: 'loginpage',   action() {     reactlayout.render(layout, {content: <login />});   } }); 

and layout component should like:

layout = react.createclass({   render() {     return (       <div>         <header />          {this.props.content}       </div>     );   } }); 

to route page takes parameter:

flowrouter.route('/detail/:id', {   name: 'proddetail',   action() {     reactlayout.render(layout, {content: <proddetail />});   } }); 

and in proddetail component, can refer flowrouter.getparam('id'). check out full flowrouter documentation.