当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《反应路由器/Hapi服务器端渲染错误》经验,为你挑选了1个好方法。

我已经苦苦挣扎了一段时间,以前有这个工作,但莫名其妙地,它又被打破了,所以很明显根本原因还没有解决.

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?但我找不到任何反应路由器文档,准确表明该参数应该是什么样子.



1> trattles..:

离开这里以防万一其他人遇到这种愚蠢的事情.

在通过Good启用更强大的错误记录之后,我意识到这个错误实际上是对我的路由未处理的/favicon.ico的请求的参考,并且这些请求落入我的反应路由中.

在我这方面非常愚蠢的错误,并且由于我在Hapi需要处理/记录错误的经验不足.

推荐阅读
ar_wen2402851455
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有