• 服务端渲染

    服务端渲染

    服务端渲染与客户端渲染有些许不同，因为你需要：

    • 发生错误时发送一个 500 的响应
    • 需要重定向时发送一个 30x 的响应
    • 在渲染之前获得数据 (用 router 帮你完成这点)

    为了迎合这一需求，你要在 <Router> API 下一层使用：

    • 使用 match 在渲染之前根据 location 匹配 route
    • 使用 RoutingContext 同步渲染 route 组件

    它看起来像一个虚拟的 JavaScript 服务器：

    1. import { renderToString } from 'react-dom/server'
    2. import { match, RoutingContext } from 'react-router'
    3. import routes from './routes'
    5. serve((req, res) => {
    6.   // 注意！这里的 req.url 必须是原始请求的全路径URL，包括参数字段
    7.   match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    8.     if (error) {
    9.       res.send(500, error.message)
    10.     } else if (redirectLocation) {
    11.       res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    12.     } else if (renderProps) {
    13.       res.send(200, renderToString(<RoutingContext {...renderProps} />))
    14.     } else {
    15.       res.send(404, 'Not found')
    16.     }
    17.   })
    18. })

    至于加载数据，你可以用 renderProps 去构建任何你想要的形式——例如在 route 组件中添加一个静态的 load 方法，或如在 route 中添加数据加载的方法——由你决定。