React-Route的同構化Javascript路由與REST API路由

我一直在研究react/flux/react-router以及如何在服務器中預渲染虛擬DOM。在服務器中調用Router.run()和renderToString將負責預先呈現服務器中的頁面，並延遲加載並將其餘的.js文件下載到客戶端。 React-router在任何情況下（客戶端或服務器）處理UI URL。這不一定與服務器的REST API網址相同。React-Route的同構化Javascript路由與REST API路由

什麼是添加路由功能的最佳實踐如果我想將後端用於具有REST功能的本機應用。我是否應該爲express.js提供一套完整的路由定義，並重新定義react-routes中的所有路由？

反應路線不一定類似於表達路線（可以有更多或更少的路線模式）。所以複製路由定義似乎是不可避免的。那是對的嗎？即使this示例似乎也在做同樣的事情。

我希望找到一種方法來重用路由定義或更乾的東西。

來源

2015-05-16 Morteza Shahriari Nia

您不希望在客戶端和服務器上覆制路由。請參閱Yahoo的流量示例：https://github.com/yahoo/flux-examples/tree/master/react-router

然後，只需在服務器上的反應路由器之前指定API請求即可。例如： -

var express = require('express'); 
var server = express(); 

// Static files 
server.use('/assets', express.static('src/assets')); 
server.use('/build', express.static('build')); 

// Declare API handling: 
require('apiRouting')(server); 

// Decalre react-router handling 
require('./routing.jsx')(server); 

// In the apiRouting.js: 
module.exports = function (server) { 
    server.get('/api/methodA', function (req, res) { 
     // body... 
    }); 
    server.get('/api/methodB', function (req, res) { 
     // body... 
    }); 
};

來源

2015-05-18 00:08:55

看看雅虎的待辦事例。他們似乎將todos作爲模擬前端[array]（https://github.com/yahoo/flux-examples/blob/master/todo/services/todo.js），並且他們假裝通過api調用隨機延遲。但他們並沒有說他們最終如何對REST路由進行REST API調用。在你的例子中，你基本上定義了apiRouting.js中的'/ api/methodA'/ api/methodB'。這是您的其餘API並返回jsons（正確？）。您必須在'./routing.jsx'中重新定義路由（URL）再次反應路由（以告訴反應組件在什麼時候呈現）。 –

因此，您需要在服務器中定義一組./api路由以分配jsons（數據庫調用和服務器資料），並定義正常路由（不帶./api）以在服務器和客戶端中呈現反應組件。 –

您可以使用路由名稱導出單個模塊，並在服務器和客戶端中使用它。這樣你可以避免重複的字符串。 –

此外，還有這使得它，所以你可以在同構的方式建立自己的API，並在客戶端和服務器重新使用它，而腹脹或破包庫。這是我們目前在大型單頁應用程序中使用的。

它被稱爲Isomorphine，你可以在這裏找到它：https://github.com/d-oliveros/isomorphine。

聲明：我是該庫的作者。

來源

2015-07-28 16:15:49

React-Route的同構化Javascript路由與REST API路由

回答

相關問題