CODEWITHSUNDEEP
meteorreactjsiron-router
Sylar
Sylar

Reputation: 12092

Configuring Iron Router in Meteor - React

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?

Upvotes: 3

Views: 2822

Answers (2)

ffxsam
ffxsam

Reputation: 27763

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.

Upvotes: 10

Sylar
Sylar

Reputation: 12092

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.

Upvotes: 0

Related Questions