Server-Side-Rendering mit react-Router

Question

Ich versuche, react-Router auf dem Server mit dem einfachsten Hallo Welt Beispiel zu laufen, und was auch immer ich mache, ist die Requisiten im Callback immer undefiniert. Seit zwei Tagen versuche ich, dass sich die API ziemlich drastisch geändert hat und alle Antworten, die ich gefunden habe, mit der alten API zusammenhingen.

Also hier das Super einfachen Codebeispiel:

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

Wenn ich eintippe/hallo im Browser, warum es nicht sagen „nicht gefunden“? Laut Dokumentation und API sollte es so funktionieren .. was fehlt mir?

Danke für Ihre Hilfe!

Answer 1

Interrobang gab mir die richtigen Tipps und ich es geschafft, damit es funktioniert, hier das Arbeits Beispiel, wenn jemand interessiert:

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