在 Meteor - React 中配置 Iron Router

Question

使用 Meteor 1.2.0.1 和 React。我的简单应用运行良好，但现在我需要 iron router.

应用布局：

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);
});

果然，在我的 app.jsx 中，效果很好，因为它显示在 html 的正文中，但该设置不适用于多页应用程序，因此需要路由.里面是：

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

问题是，如何让iron router(routes.jsx)显示内容？

Answer 1

我也强烈建议使用 Flow Router instead of Iron Router. Add Flow Router to your app, then add kadira:react-layout。遵循这种格式，它应该可以工作：

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

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

您的 Layout 组件应该如下所示：

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

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

要路由到带有参数的页面：

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

然后在你的ProdDetail组件中，你可以引用FlowRouter.getParam('id')。查看完整的 FlowRouter documentation.

Answer 2

解决方案是添加 ejson package which solved the issue, thanks to Chris。但我可以轻松地遵循 Flow Router，所以我会标记（因为我将使用它）答案，但对于遇到此问题的任何人，请使用 ejson 包。然而随着时间的推移我的解析器。

在 Meteor - React 中配置 Iron Router

Configuring Iron Router in Meteor - React

meteor

reactjs

iron-router