使用React-Router进行服务器端渲染

Question

我正在尝试使用最简单的Hello World示例在服务器上运行react-router，无论我做什么，回调中的props始终是未定义的。 经过两天的尝试，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，它应该像那样工作..我缺少什么？

谢谢你的帮助！

Answer 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);