使用 react-router 进行服务器端渲染答案

【问题标题】：Server side rendering with react-router使用 react-router 进行服务器端渲染
【发布时间】：2016-08-06 19:01:34
【问题描述】：

我正在尝试使用最简单的 Hello World 示例让 react-router 在服务器上运行，无论我做什么，回调中的道具始终是未定义的。经过两天的尝试，API 似乎发生了很大变化，我找到的所有答案都与旧 API 相关。

所以这里是超级简单的代码示例：

import http from 'http'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { match, RoutingContext } from 'react-router'
import fs from 'fs'


class Home extends React.Component{
    render(){
        return <div>{this.props.children}</div>         
    }
}

class Hello extends React.Component{
    render(){
        return <h1>Hello World</h1>
    }
}

class Routes extends React.Component{
    render(){
        return (
            <Route path="/" component={Home}>
                <Route path="hello" component={Hello} />
            </Route>
        )
    }
}

http.createServer((req, res) => {

    match({ Routes, location: req.url }, (err, redirect, props) => {
        if (props){
            let markup = renderToString(<RouterContext {...props}/>)
            res.write(markup)
            res.end()
        } else {
            res.write("not found")
            res.end()
        }

    })  
}).listen(8888);

如果我在浏览器中输入 /hello，为什么会显示“找不到”？根据文档和 API，它应该像那样工作.. 我错过了什么？

感谢您的帮助！

【问题讨论】：

Routes 不应该是一个函数或类，而只是 JSX <Route>s 的一个对象。 match() 正在寻找的属性是 routes，而不是 Routes。这两个修复程序应该可以让您顺利上路。

标签： javascript node.js reactjs react-router isomorphic-javascript

【解决方案1】：

Interrobang 给了我正确的提示，我设法让它工作，如果有人感兴趣，这里是工作示例：

import http from 'http'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { Route, match, RouterContext } from 'react-router'
import fs from 'fs'


class Home extends React.Component{
    render(){
        return <div>{this.props.children}</div>         
    }
}

class Hello extends React.Component{
    render(){
        return <h1>Hello World</h1>
    }
}

const routes = (
    <Route path="/" component={Home}>
        <Route path="hello" component={Hello} />
    </Route>    
)

http.createServer((req, res) => {

    match({ routes, location: req.url }, (err, redirect, props) => {
        if (props){
            let markup = renderToString(<RouterContext {...props}/>)
            res.write(markup)
            res.end()
        } else {
            res.write("not found")
            res.end()
        }

    })  
}).listen(8888);

【讨论】：