服務器端渲染與反應路由器

Question

我試圖讓反應路由器在最簡單的Hello World示例服務器上運行，無論我做什麼，回調中的道具總是未定義的。嘗試自兩天以來，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); 

如果我輸入/你好瀏覽器，爲什麼它說「沒有發現」？根據文檔和API，它應該像那樣工作..我錯過了什麼？

感謝您的幫助！

Answer 1

進行插入給了我正確的提示，我設法使它工作，這裏的工作例如，如果有人有興趣：

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