我正在尝试在我的项目中实现 react-router,但遇到了巨大的概念误解。对于我应用程序中的某些组件,我需要从服务器获取数据。以前我是用这段代码做的:
$.get('/getSmData', options, function (result) {
// set state with result or whatever
}.bind(this));
放置在 componentDidMount 或 onClick 函数中,但现在,为了进行服务器路由,所有请求都转到我的路由文件。
如何获取数据?
这是我服务器的路由部分:
var renderToString = require( 'react-dom/server').renderToString
var match = require('react-router').match
var RouterContext = require('react-router').RouterContext
var routes = require('./routes')
app.get('*', function (req, res) {
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.render('index', {
react: renderToString(React.createElement(RouterContext, renderProps)),
})
} else {
res.status(404).send('Not found')
}
})
})
这是routes.js
module.exports= (
<Router history={browserHistory}>
<Route path='/' component={index.App}>
<Route path='/firstPage' component={First}>
<Route path=':firstPageChild' component={FirstCh}/>
</Route>
</Route>
<Route path='/secondPage' component={Second}/>
</Route>
</Router>
);
假设我需要在 onButtonClick 函数中获取 firstPageChild 的一个子项的子项中的一些数据。我无法预渲染数据并发送标记,那么我应该怎么做呢?
最佳答案
相信您已经找到了答案。但请让我回答,以防有人遇到同样的问题(就像我今天早上遇到的那样)。
- 您应该将 404 错误处理移出“匹配 react 路由器”功能,
- 将第三个参数“next”添加到上面的返回函数#1,
- 将返回 AJAX 数据的代码放在该函数下方。
- 创建一个路由来处理 404 未找到错误并将其放在底部。
所以你的代码将是这样的:
app.get('*', function (req, res, next) {
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.render('index', {react: renderToString(React.createElement(RouterContext, renderProps)),
})
} else {
// release control to the next middleware, in this case your URL for catching AJAX data
next();
}
})
})
// return your AJAX data
app.get('/getSmData', function (req, res) {
res.send({ status: 'ok' });
});
// return 404 not found error
app.use(function (req, res) {
res.status(404).send('Not found');
});
关于javascript - React-router服务端渲染和ajax取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37256258/