第八步：React路由（服務端） · 使用React、Node.js、MongoDB、Socket.IO開發一個角色投票應用

## 第八步：React路由（服務端）打開*server.js*并將下面的代碼粘貼到文件最前面，我們需要導入這些模塊： ~~~ var swig = require('swig'); var React = require('react'); var Router = require('react-router'); var routes = require('./app/routes'); ~~~ 然后，將下面的中間件也加入到*server.js*中去，放在現有的Express中間件之后。 ~~~ app.use(function(req, res) { Router.run(routes, req.path, function(Handler) { var html = React.renderToString(React.createElement(Handler)); var page = swig.renderFile('views/index.html', { html: html }); res.send(page); }); }); ~~~ ![](https://box.kancloud.cn/2015-09-14_55f64304be166.jpg) 這個中間件在每次請求時都會執行。這里server.js中的`Router.run`和main.js中`Router.run`的主要區別是應用是如何渲染的。在客戶端，渲染完成的HTML標記將被插入到`<div id="app"></div>`，在服務器端，渲染完成的HTML標記被發到index.html模板，然后被[Swig](http://paularmstrong.github.io/swig/)模板引擎插入到`<div id="app">{{ html|safe }}</div>`中，我選擇Swig是因為我想嘗試下[Jade](http://jade-lang.com/)和[Handlerbars](http://handlebarsjs.com/)之外的選擇。但我們真的需要一個獨立的模板嗎？為什么不直接將內容渲染到App組件呢？是的，你可以這么做，只要你能接受[違反W3C規范](https://validator.w3.org/)的HMTL標記，以及不能在組件中直接包含內嵌的script標簽，比如Google Analytics。不過即便這么說，好像現在不規范的HMTL標記也不再和SEO相關了，也有一些[繞過的辦法](https://github.com/hzdg/react-google-analytics/blob/master/src/index.coffee)來包含內嵌script標簽，所以要怎么做看你咯，不過為了這個教程的目的，讓我們還是使用Swig模板引擎吧。在項目根目錄新建目錄views，進入目錄并新建文件*index.html*： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>New Eden Faces</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900"/> <link rel="stylesheet" href="/css/main.css"/> </head> <body> <div id="app">{{ html|safe }}</div> <script src="/js/vendor.js"></script> <script src="/js/vendor.bundle.js"></script> <script src="/js/bundle.js"></script> </body> </html> ~~~ 打開兩個終端界面并進入根目錄，在其中一個運行`gulp`，連接依賴文件、編譯LESS樣式并監視你的文件變化： ![](https://box.kancloud.cn/2015-09-14_55f64304ed427.jpg) 在另一個界面運行`npm run watch`來啟動Node.js服務器并在文件變動時自動重啟服務器： ![](https://box.kancloud.cn/2015-09-14_55f643052d54d.jpg) 在瀏覽器打開[http://localhost:3000](http://localhost:3000/)，現在你應該能看到React應用成功渲染了。 ![](https://box.kancloud.cn/2015-09-14_55f643054cced.jpg) 我們堅持到現在，做了大量的工作，結果就給我們顯示了一個提示信息！不過還好，最艱難的部分已經結束了，從現在開始我們可以輕松一點，專注到創建React組件并實現REST API端點。上面的兩個命令`gulp`和`npm run watch`將為我們完成臟活累活，我們不用在添加React組件后的重新編譯和Express服務器重啟上費心啦。