服务器端渲染与反应路由器

问题描述：

我试图让反应路由器在最简单的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，它应该像那样工作..我错过了什么？

感谢您的帮助！

途径不应该是一个函数或类，只是JSX的对象'小号'。 'match（）'所寻找的属性是'routes'，而不是'Routes'。这两个修补程序应该可以帮助您。 – 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);

服务器端渲染与反应路由器

相关推荐