我有一個陣營應用程序，其中main.js調用app.js，可呈現作爲父組件 - 因爲在這裏可以看到：建立反應路由器的流量應用

React.render(<APP />, document.getElementById("main"));

現在我需要設置React Router，這樣app.js將在應用內處理路由。

當前的設置

要建立我的路我已經創建routes.js，其中包含下面的代碼：

var Router = require('react-router'); 
var Route = Router.Route; 

var routes = (
    <Route handler={App}> 
    <Route path="/" handler={home}/> 
    </Route> 
); 

module.exports = routes;

在app.js我導入路由加入RouteHandler，如文檔中：

var React = require('react'); 
var Router = require('../routes.js'); 
var RouteHandler = Router.RouteHandler; 

var APP = React.createClass({ 
    render: function() { 
    return (
     <RouteHandler/> 
    ); 
    } 
}); 

module.exports = APP;

我無法理解文檔中的這段代碼：

Router.run(routes, Router.HashLocation, (Root) => { 
    React.render(<Root/>, document.body); 
});

既然我已經叫<app />組件從main組件我想處理所有的路由在app部件內。我認爲上面的代碼是通過Root轉移handler={component_to_render}。但是，如何將app.js中的代碼配置爲將路線轉移到<RouteHandler/>？

我的整個設置可能是錯誤的，所以任何指導將不勝感激。

來源

2015-08-28 rosnk

它應該工作，有什麼問題？您不明白的語法是稱爲[ArrowFunction]的ES6語法（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions），它是編寫'function（根目錄）{return React.render（，document.body）}）' – Pcriulan

我從「主要組件」渲染「應用程序」組件，我打算在「主要」組件而不是「應用程序」組件中使用路線。爲了進一步解釋，我打算所有的路線來實現「主要」組件，並根據通過的路線呈現新組件。例如，如果這條路由被觸發，我想在main.js.中加載「home」組件。現在我不知道Router.run的位置... 。代碼去，我不打算在Router.run函數內使用React.render（，document.body），我只需要從routes.js中觸發的任何路由實現app.js – rosnk

這不是完整的答案，但我注意到一個問題：你正在導入'routes.js'作爲React Router，而不是在'app.js'中導入實際的React Router，你需要'require' React Router和獨立的路由：'var Router = require（'react-router'）'和'var routes = require（'../ routes.js'）;'。 –

由於Router必須知道要呈現哪個組件，它必須是根組件。因此，而不是寫...

React.render(<APP />, document.getElementById("main"));

...只是寫：

Router.run(routes, Router.HashLocation, (Root) => { 
    React.render(<Root/>, document.getElementById("main")); 
});

當某些用戶點擊「/」 URL時，<Root/>節點會使您APP處理這反過來會呈現您的HomeComponent。

來源

2015-08-28 12:35:25 Pcriulan

如果我使用 'React.render（，document.getElementById（「main」））;」在main.js中呈現應用程序中的應用程序組件。JS，現在我想渲染/（根）或app.js內的任何路線，但不是main.js。我有裏面的app.js，但現在我怎麼聽URL和渲染組件內app.js.而且我也不能使用這段代碼來監聽url，因爲這段代碼有[document.getElementById（「main」））; ] 代碼： Router.run（路線，Router.HashLocation，（根）=> { React.render（，的document.getElementById（「主」））; }）; – rosnk

例如，假設您有一個「公共」應用程序和一個「管理員」應用程序，所以您需要不同的路線，這就是您想要的那種？ – Pcriulan

建立反應路由器的流量應用

當前的設置

回答

相關問題