反应路由器/Hapi服务器端渲染错误答案

【问题标题】：React Router / Hapi Server Side Rendering Error反应路由器/Hapi服务器端渲染错误
【发布时间】：2016-01-04 13:46:25
【问题描述】：

我已经为此苦苦挣扎了一段时间，之前有这个工作，但莫名其妙地又坏了，所以显然根本原因还没有解决。

反应路由器 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] `<RouterContext>` expects a `router` rather than a `history`

虽然页面加载正常，但客户端路由似乎工作得很好。

来自Server.js的相关sn-p：

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;

当我转储渲染道具时，这就是我得到的

{
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 ？但我找不到任何 react-router 文档可以准确说明该参数的外观。

【问题讨论】：

标签： reactjs react-router hapijs

【解决方案1】：

把这个留在这里，以防其他人遇到这种愚蠢的事情。

在通过 Good 启用更强大的错误日志记录后，我意识到这个错误实际上是对 /favicon.ico 的请求的引用，我的路由没有处理该请求，并且正在下降到我的反应路由中。

我犯了一个非常愚蠢的错误，并且由于我缺乏在 Hapi 中处理/记录错误的经验。

【讨论】：

啊，是的，我有一个类似的 wtf，我以为我正在为每个请求进行双重渲染，但它只是 favico 进入那部分;)

【解决方案2】：

如果你和我一样，按照 Github 上的 reactjs react-router-tutorial 来到这里（如果没有，请查看），这些错误消息可能会显示，因为你没有描述在路线”。如果它只显示在未定义的路线上（尝试在 localhost:8080/ 之后随机输入一些内容），请帮自己一个忙，将this 读到最后。

另外，在服务器的 app.get 调用中插入一个 console.log('req.url: ', req.url) 以查看导致错误的原因。

Also II：在 match 函数之外声明 appHTML 以确保它在 res.send() 中存在。

【讨论】：