Configuring Iron Router in Meteor - React

断了今生、忘了曾经 提交于 2020-01-01 06:55:09

问题


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?


回答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.




回答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.



来源:https://stackoverflow.com/questions/32792092/configuring-iron-router-in-meteor-react

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!