如何使用 react-router 1.0.0 进行服务器渲染?
How to do server rendering with react-router 1.0.0?
我是 React 的新手,正在按照教程构建同构应用程序。在服务器端它使用 router.run()
做渲染的事情,但它在 react-router 1.0.0 中被删除了。
Router.run(routes, req.url, Handler => {
let content = React.renderToString(<Handler />);
res.render('index', {
content: content
});
});
更新指南所说的是
// v0.13.x
Router.run(routes, (Handler) => {
render(<Handler/>, el);
})
// v1.0
render(<Router>{routes}</Router>, el)
但是我该如何处理服务器渲染呢?
示例:
import { renderToString } from 'react-dom/server'
import { match, RoutingContext } from 'react-router'
import routes from './routes'
serve((req, res) => {
// Note that req.url here should be the full URL path from
// the original request, including the query string.
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
if (error) {
res.status(500).send(error.message)
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search)
} else if (renderProps) {
res.status(200).send(renderToString(<RoutingContext {...renderProps} />))
} else {
res.status(404).send('Not found')
}
})
})
可以找到更多 in the docs。
我是 React 的新手,正在按照教程构建同构应用程序。在服务器端它使用 router.run()
做渲染的事情,但它在 react-router 1.0.0 中被删除了。
Router.run(routes, req.url, Handler => {
let content = React.renderToString(<Handler />);
res.render('index', {
content: content
});
});
更新指南所说的是
// v0.13.x
Router.run(routes, (Handler) => {
render(<Handler/>, el);
})
// v1.0
render(<Router>{routes}</Router>, el)
但是我该如何处理服务器渲染呢?
示例:
import { renderToString } from 'react-dom/server'
import { match, RoutingContext } from 'react-router'
import routes from './routes'
serve((req, res) => {
// Note that req.url here should be the full URL path from
// the original request, including the query string.
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
if (error) {
res.status(500).send(error.message)
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search)
} else if (renderProps) {
res.status(200).send(renderToString(<RoutingContext {...renderProps} />))
} else {
res.status(404).send('Not found')
}
})
})
可以找到更多 in the docs。