Question

我正在设置一个简单的玩具应用程序来学习React / Hapi，一切运行良好，直到我尝试设置服务器端路由。服务器运行时没有错误并呈现＆＃34; /＆＃34;适当地与你好世界。

然而，当我导航到＆＃34; / test＆＃34;我收到以下错误。

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`.

我在哪里错了？

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

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>
);

因为他们被要求

客户端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'));

客户端路由器

 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

您需要将history作为道具传递给客户端上的Router：

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

您的服务器代码可能存在的问题是您没有正确地将路由传递给match。它需要一个名为routes的属性，而不是Routes。试试这个：

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

特别注意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 个答案: