使用 Meteor 1.2.0.1 和 React。我的简单应用程序运行良好,但现在我需要铁路由器 https://github.com/iron-meteor/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>
);
}
});
布局.jsx:
Layout = React.createClass({
render() {
return (
<div>
{this.props.children}
</div>
);
}
});
路线.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
) 显示内容?
我强烈推荐使用流路由器 https://atmospherejs.com/kadira/flow-router而不是铁路由器。将 Flow Router 添加到您的应用程序,然后添加kadira:react-layout https://atmospherejs.com/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文档 https://github.com/kadirahq/flow-router/blob/master/README.md.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)