0

最も簡単なHello Worldの例でリアクションルーターをサーバー上で実行しようとしていますが、私が何をしていても、コールバックの小道具は常に定義されていません。 2日ほど経ってから、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によると、それはうまくいくはずです。何が欠けていますか?

ありがとうございました!誰かが興味を持っている場合は、ここに、実施例を

+0

ルートは、関数やクラス、JSXのちょうどオブジェクト 'のではありません'。 'match()'が探しているプロパティは 'routes'ではなく' routes'です。これらの2つの修正は、あなたの方法であなたを取得する必要があります。 – Interrobang

+0

完璧なおかげで! –

答えて

0

インテロバングは私に右のヒントを与えたと私はそれを動作させるために管理:

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); 
関連する問題