在Meteor中配置铁路由器 - React

Question

使用Meteor 1.2.0.1和React.我的简单app很棒,但现在我需要铁路由器.

应用布局:

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

问题是,如何让铁路由器(routes.jsx)显示内容？

Answer 1

我强烈建议使用Flow Router而不是Iron Router.将Flow Router添加到您的应用程序,然后添加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文档.