在流星中配置Iron Router-React [英] Configuring Iron Router in Meteor - React

问题描述

使用Meteor 1.2.0.1和React.我的简单应用很好用，但现在我需要铁路由​​器.

Using Meteor 1.2.0.1 and React. My simple app works great but now I needed 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的正文中，但是该设置不适用于多页应用程序，因此这是路由的需要.里面是:

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

问题是，如何使铁路由器(routes.jsx)显示内容?

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

推荐答案

我强烈建议使用流路由器而不是铁路由器.将Flow Router添加到您的应用中，然后还添加 kadira:react-layout .遵循这种格式，它应该可以工作:

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

您的Layout组件应如下所示:

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

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

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

这篇关于在流星中配置Iron Router-React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！