服务端渲染

何柯 · 何柯 · commit 89d749387689 · 2016-06-07T18:10:32.000+08:00
diff --git a/lessons/01-setting-up/index.js b/lessons/01-setting-up/index.js
@@ -1,20 +1,9 @@
 import React from 'react'
 import { render } from 'react-dom'
-import {Router,Route,browserHistory,IndexRoute} from 'react-router'
-import App from './modules/App'
-import About from './modules/About'
-import Repos from './modules/Repos'
-import Repo from './modules/Repo'
-import Home from './modules/Home'
+import {Router,browserHistory} from 'react-router'
+import routes from './modules/routes'
 
-render((
-    <Router history={browserHistory}>
-        <Route path="/" component={App}>
-            <IndexRoute component={Home}/>
-            <Route path="/repos" component={Repos}>
-                <Route path="/repos/:userName/:repoName" component={Repo}/>
-            </Route>
-            <Route path="/about" component={About}/>
-        </Route>
-    </Router>
-), document.getElementById('app'))
+render(
+    <Router routes={routes} history={browserHistory}/>,
+    document.getElementById('app')
+);
diff --git a/lessons/01-setting-up/modules/routes.js b/lessons/01-setting-up/modules/routes.js
@@ -0,0 +1,21 @@
+/**
+ * Created by heke on 2016/6/7.
+ */
+import React from 'react'
+import {Route,IndexRoute} from 'react-router'
+import App from './App'
+import About from './About'
+import Repos from './Repos'
+import Repo from './Repo'
+import Home from './Home'
+
+module.exports = (
+    <Route path="/" component={App}>
+        <IndexRoute component={Home}/>
+        <Route path="/repos" component={Repos}>
+            <Route path="/repos/:userName/:repoName" component={Repo}/>
+        </Route>
+        <Route path="/about" component={About}/>
+    </Route>
+);
+
diff --git a/lessons/01-setting-up/server.js b/lessons/01-setting-up/server.js
@@ -1,20 +1,46 @@
 /**
  * Created by heoo442 on 2016/6/5.
  */
-var express = require('express')
-var path = require('path')
-var compression = require('compression')
+import express from 'express'
+import path from 'path'
+import compression from 'compression'
+import React from 'react';
+import {renderToString} from 'react-dom/server';
+import {match,RouterContext} from 'react-router';
+import  routes from './modules/routes';
 
 var app = express()
-//must be first
-app.use(compression())
-app.use(express.static(path.join(path.resolve(__dirname), 'public')))
+app.use(compression()); ////must be first
+app.use(express.static(path.join(path.resolve(__dirname), 'public'), {index: false}));
 
-app.get('*', function (req, res) {
-    res.sendFile(path.join(path.resolve(__dirname), 'public', 'index.html'))
-})
+app.get('*', (req, res) => {
+    match({routes: routes, location: req.url}, (err, redirect, props)=> {
+        if (err) {
+            res.status(500).send(err.message);
+        } else if (redirect) {
+            res.redirect(redirect.pathname + redirect.search);
+        } else if (props) {
+            const appHtml = renderToString(<RouterContext {...props}/>);
+            res.send(renderPage(appHtml));
+        } else {
+            res.status(404).send('Not Found');
+        }
+    });
+});
+
+function renderPage(appHtml) {
+    return `
+    <!doctype html public="storage">
+    <html>
+    <meta charset=utf-8/>
+    <title>My First React Router App</title>
+    <link rel="stylesheet" href=/index.css>
+    <div id=app>${appHtml}</div>
+    <script src="/bundle.js"></script>
+    `;
+}
 
-var PORT = process.env.PORT || 8080
+var PORT = process.env.PORT || 8088
 app.listen(PORT, function () {
     console.log('Production Express server running at localhost:' + PORT)
 })
