gpt4 book ai didi

meteor - 在 Meteor 中配置 Iron 路由器 - React

转载 作者:行者123 更新时间:2023-12-03 13:57:29 25 4
gpt4 key购买 nike

使用 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)显示内容?

最佳答案

我强烈建议使用 Flow 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 documentation .

关于meteor - 在 Meteor 中配置 Iron 路由器 - React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32792092/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com