我已经苦苦挣扎了一段时间,之前有这个工作,但莫名其妙地,它再次被打破,所以显然根本原因尚未解决 .
React Router v:2.0.0-rc4
Issue: 加载页面时,服务器返回以下错误 .
Warning: Failed propType: Required prop `router` was not specified in `RouterContext`.
Warning: Failed propType: Required prop `location` was not specified in `RouterContext`.
Warning: Failed propType: Required prop `routes` was not specified in `RouterContext`.
Warning: Failed propType: Required prop `params` was not specified in `RouterContext`.
Warning: Failed propType: Required prop `components` was not specified in `RouterContext`.
Warning: [react-router] `<RouterContext>` expects a `router` rather than a `history`
页面正常加载,客户端路由似乎工作得很好 .
来自Server.js的相关片段:
import routeConfig from './../common/routes/Routes.js';
const handleRender = function(req, res) {
const initialState = {
profile: {
name: 'Bob',
age: 10
},
messages: []
}
const createStoreWithMiddleware = applyMiddleware( thunkMiddleware)(createStore);
const store = createStoreWithMiddleware(reducer(initialState));
match({routes: routeConfig, location: req.url}, (error, redirectLocation, renderProps) => {
// res(req.url);
if(error) {
res('error' + error.message);
}
else {
res(renderProps);
const html = renderToString(
<Provider store={store}>
<RouterContext {...renderProps} />
</Provider>
);
//const initialState = store.getState();
//res(renderFullPage(html, initialState));
}
});
}
这是从Routes.js导出的内容
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Route } from 'react-router';
//Components
import App from './../components/App.jsx';
import Name from './../components/Name.jsx';
import Profile from './../components/Profile.jsx';
import Messages from './../components/Messages.jsx';
const routeConfig = [
{
path: '/',
component: App,
childRoutes: [
{path: 'test', component: Name},
{path: 'profile', component: Profile},
{path: 'messages', component: Messages}
]
}
];
export default routeConfig;
当我转出renderprops时,这就是我得到的
{
routes: [
{
path: "/",
childRoutes: [
{
path: "test"
},
{
path: "profile"
},
{
path: "messages"
}
]
},
{
path: "test"
}
],
params: { },
location: {
protocol: null,
slashes: null,
auth: null,
host: null,
port: null,
hostname: null,
hash: null,
search: null,
query: { },
pathname: "/test",
path: "/test",
href: "/test"
},
components: [
null,
null
],
history: {
__v2_compatible__: true
},
router: {
__v2_compatible__: true
}
}
所以它似乎永远不会匹配组件 . 也许我错误地传递了req.url?但我找不到任何反应路由器文档,准确表明该参数应该是什么样子 .
2 回答
离开这里以防其他人遇到这种愚蠢的事情 .
通过Good启用更强大的错误日志记录后,我意识到这个错误实际上是对我的路由未处理的/favicon.ico的请求的引用,并且这些请求落入我的反应路由中 .
在我这方面非常愚蠢的错误,并且由于我在Hapi需要处理/记录错误的经验不足 .
如果你像我一样来到Github上的reactjs react-router-tutorial之后(如果没有,请查看它),这些错误信息可能会显示,因为你没有't described any alternatives to finding a route in the Routes' . 如果它只出现在未定义的路由上(尝试在localhost:8080 /之后输入一些随机的东西),请自己帮忙并阅读this到最后 .
另外,在服务器的app.get调用中插入console.log('req.url:',req.url)以查看导致错误的原因 .
另外II:在匹配函数之外声明appHTML以确保它能够存活到res.send()中 .