我正在设置一个简单的玩具应用程序来学习 React/Hapi 并且一切正常，直到我尝试设置服务器端路由。服务器运行时没有错误，并使用 hello world 正确呈现“/”。
但是，当我导航到“/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`.
我在哪里错了？
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>
);
1 回答
您需要在客户端上将
history作为 prop 传递给Router：你的 server-code 可能存在的问题是你没有正确地将路由传递给
match。它需要一个名为routes的属性，而不是Routes。试试这个：特别注意文件的这个陈述：