我已经苦苦挣扎了一段时间,以前有这个工作,但莫名其妙地,它又被打破了,所以很明显根本原因还没有解决.
React Router v:2.0.0-rc4
问题:加载页面时,服务器返回以下错误.
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] `` 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(); //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?但我找不到任何反应路由器文档,准确表明该参数应该是什么样子.
离开这里以防万一其他人遇到这种愚蠢的事情.
在通过Good启用更强大的错误记录之后,我意识到这个错误实际上是对我的路由未处理的/favicon.ico的请求的参考,并且这些请求落入我的反应路由中.
在我这方面非常愚蠢的错误,并且由于我在Hapi需要处理/记录错误的经验不足.