React Router服务器端渲染错误：警告：propType失败：在`RoutingContext`中未指定必需的prop`history`

Question

I'm setting up a simple toy app to learn React/Hapi and everything is working well till I try and set up serverside routing. 我正在建立一个简单的玩具应用程序来学习React / Hapi，一切运行良好，直到我尝试设置服务器端路由。 The server runs without error and renders "/" properly with hello world. 服务器运行时没有错误，并使用hello world正确呈现“/”。

However when I navigate to "/test" I get the following errors. 但是，当我导航到“/ test”时，我收到以下错误。

Warning: Failed propType: Required prop `history` was not specified in `RoutingContext`.
Warning: Failed propType: Required prop `location` was not specified in `RoutingContext`.
Warning: Failed propType: Required prop `routes` was not specified in `RoutingContext`.
Warning: Failed propType: Required prop `params` was not specified in `RoutingContext`.
Warning: Failed propType: Required prop `components` was not specified in `RoutingContext`.

Where am I going wrong here? 我在哪里错了？

Server.js Server.js

'use strict';

const Hapi = require('hapi');
const Path = require('path');

const server = new Hapi.Server();
server.connection({ port: 3000});

//React Junk
import React from 'react';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import { renderToString } from 'react-dom/server';
import reducer from './../common/Reducers/index.js';
import { match, RoutingContext } from 'react-router';
import Routes from './../common/routes/Routes.js';

const handleRender = function(req, res) {
    const store = createStore(reducer);
    match({Routes, location: req.url}, (error, redirectLocation, renderProps) => {
        //res(req.url);
        if(error) {
            res(error.message);
        }
        else {
            const html = renderToString(
            <Provider store={store}>
                <RoutingContext {...renderProps} />
            </Provider>
            );

            const initialState = store.getState();

            res(renderFullPage(html, initialState));
        }

    });
    // const html = renderToString(
    //  <Provider store={store}>
    //      <App />
    //  </Provider>
    // );

    // const initialState = store.getState();

    // res(renderFullPage(html, initialState));
}

const renderFullPage = function(html, initialState) {
    return `
        <!doctype html>
        <html>
            <head>
                <title>Please Work</title>
            </head>
            <body>
                <div id="app-mount">${html}</div>
                <script>
                    window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
                </script>
                <script src="/static/bundle.js"></script>
            </body>
        </html>
    `;
}

server.register(require('inert'), (err) => {
    server.route({
        method: 'GET',
        path: '/static/{filename}',
        handler: function (req, reply) {
            reply.file('static/' + req.params.filename);
        }
    })
    server.route({
        method: 'GET',
        path: '/',
        handler: function(req, res) {
            res('hello world');
        }
    });
    server.route({
        method: 'GET',
        path: '/{path*}',
        handler: function(req, res) {
            handleRender(req, res);
        }
    })

    server.start(() => {
        console.log('Server running at:', server.info.uri);
    })
})

Routes.js Routes.js

import { Route } from 'react-router';

//Components
import App from './../components/App.jsx';
import Name from './../components/Name.jsx';

export default (
    <Route path="/" component={App}>
        <Route path="test" component={Name} />
    </Route>
);

Because they were asked for 因为他们被要求

Client entry.jsx 客户端entry.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import {createStore} from 'redux';
import {Provider} from 'react-redux';
import App from './../common/components/App.jsx';
import Router from './../common/routes/Router.jsx';
import reducers from './../common/Reducers';

const initialState = window.__INITIAL_STATE__;
const store = createStore(reducers(initialState));

ReactDOM.render(
    <Provider store={store}>
        <Router />
    </Provider>
, document.getElementById('app-mount'));

Client Router 客户路由器

 import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router';
import createHashHistory from 'history/lib/createHashHistory';

const history = createHashHistory();

import Routes from './Routes.js';

export default (
    <Router history={history}>
        <Routes />
    </Router>
);

Answer 1

You need to pass history as a prop to Router on the client: 您需要将history作为prop传递给客户端上的Router ：

export default (
    <Router history={history}>
        <Routes />
    </Router>
);

The likely problem with your server-code is that you aren't passing the routes to match correctly. 与您的服务器代码的可能的问题是，你是不是传递路线match正确。 It expects a property named routes , not Routes . 它期望一个名为routes的属性，而不是Routes 。 Try this: 试试这个：

match({routes: Routes, location: req.url}, (error, redirectLocation, renderProps) => {

Especially note this statement from the documentation : 特别注意文档中的这个声明：

If all three parameters are undefined, this means that there was no route found matching the given location.

React Router服务器端渲染错误：警告：propType失败：在`RoutingContext`中未指定必需的prop`history`

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-12-28 21:59:17

React Router服务器端渲染错误：警告：propType失败：在`RoutingContext`中未指定必需的prop`history`

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-12-28 21:59:17

解决方案1
3 已采纳 2015-12-28 21:59:17