服务器上的反应路由器与位置不匹配

Question

我正在按照此处给出的示例使用反应路由器服务器端：

https://github.com/ReactTraining/react-router/blob/v2.8.1/docs/guides/ServerRendering.md

不知何故，与这个简单的路由器设置匹配不匹配给定的位置：

import React from "react"
import ReactDOMServer from 'react-dom/server'
import { Route, match, RouterContext, IndexRoute } from 'react-router'

const sampleRoutes = (
    <Route path="/">
        <IndexRoute component={() => <span>index</span>}/>
        <Route path="z1" component={() => <span>z1</span>} />
        <Route path="z2" component={() => <span>z2</span>} />
    </Route>
)

const render = location => {
    match({sampleRoutes, location}, (error, redirectLocation, renderProps) => {
        if (error) {
            console.error("error: "+ error)
        } else if (redirectLocation) {
            console.error("redirect to " + redirectLocation)
        } else if (renderProps) {
            var page = ReactDOMServer.renderToStaticMarkup(<RouterContext {...renderProps} />)
            console.log(page)
        } else {
            console.error("location nof found: '"+ location +"'")
        }
    })
}

render("/z1")

我在控制台上收到“找不到路由 /z1”。

Answer 1

match 需要一个 routes 对象（它会将您的 <Route>s 转换为您的对象，请参阅 this comment），但您为它提供了一个 <Router> 元素。试试：

const sampleRoutes = (
  <Route path="/">
    <IndexRoute component={() => <span>index</span>}/>
    <Route path="z1" component={() => <span>z1</span>} />
    <Route path="z2" component={() => <span>z2</span>} />
  </Route>
)

其次，您将以下对象传递给match：

{sampleRoutes, location}

翻译为：

{ sampleRoutes: sampleRoutes, location: location }

当你真正想要的时候：

{ routes: sampleRoutes, location }