在Meteor配置鐵路路由器 - 反應

使用Meteor 1.2.0.1和React。我的簡單應用程序很好，但現在我需要iron router。在Meteor配置鐵路路由器 - 反應

應用佈局：

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），顯示的內容？

來源

2015-09-25 Sylar

我強烈建議使用Flow Router而不是Iron 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。

來源

2015-09-26 02:53:51 ffxsam

我喜歡渲染爲「id」的想法。那可能嗎？ – Sylar

在http://react-in-meteor.readthedocs.org/en/latest/routing/路徑是流星添加meteorhacks：流量路由器應該使用meteorhacks或kadira？ – velop

使用'kadira：flow-router'。他們在一段時間之前移動了它。 – ffxsam

解決方法是添加ejson package解決了這個問題，這要歸功於Chris。但是我可以輕鬆關注流路由器，因此我將標記（因爲我將使用它）答案，但對於有此問題的任何人，請使用ejson軟件包。然而，隨着時間的推移我的解析器。

來源

2015-09-26 07:19:00 Sylar

在Meteor配置鐵路路由器 - 反應

回答

相關問題