Configuring Iron Router in Meteor - React

Question

Using Meteor 1.2.0.1 and React. My simple app works great but now I 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 my app.jsx, works great as it displays to the body of the html but the setup would not work for a multi-page app so this is the need for routes. Inside is:

Meteor.startup(() => {
  let app = (
    <Layout>
      <Home/>
    </Layout>
  );
  React.render(app, document.body);
});

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

Answer 1

I would strongly recommend using Flow Router instead of Iron Router. Add Flow Router to your app, then add kadira:react-layout as well. Follow this format and it should work:

FlowRouter.route('/', {
  name: 'home',
  action() {
    ReactLayout.render(Layout, {content: <Home />});
  }
});

FlowRouter.route('/login', {
  name: 'loginPage',
  action() {
    ReactLayout.render(Layout, {content: <Login />});
  }
});

And your Layout component should look like:

Layout = React.createClass({
  render() {
    return (
      <div>
        <Header />

        {this.props.content}
      </div>
    );
  }
});

To route to a page that takes a parameter:

FlowRouter.route('/detail/:id', {
  name: 'prodDetail',
  action() {
    ReactLayout.render(Layout, {content: <ProdDetail />});
  }
});

And then in your ProdDetail component, you can refer to FlowRouter.getParam('id'). Check out the full FlowRouter documentation.

Answer 2

The solution was to add the ejson package which solved the issue, thanks to Chris. But I can easily follow Flow Router so I'll mark (since I'll be using it) that the answer but for anyone that has this issue, use the ejson package. However then my resolver over time.