6
Tôi đang thiết lập một ứng dụng đồ chơi đơn giản để tìm hiểu React/Hapi và mọi thứ hoạt động tốt cho đến khi tôi thử lên định tuyến serverside. Máy chủ chạy không có lỗi và hiển thị "/" đúng cách với hello world.React Router serverside rendering errors: Cảnh báo: Không thành công propType: Prop bắt buộc `history` không được chỉ định trong` RoutingContext`
Tuy nhiên khi tôi điều hướng đến "/ test", tôi nhận được các lỗi sau.
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`.
Tôi sẽ làm gì sai ở đây?
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>
);
Bởi vì họ đã yêu cầu
Khách hàng 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'));
khách hàng 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>
);
gì client-side của bạn mã render cái nhìn như thế nào? Các lỗi này có phải là lỗi phía máy khách không? Hoặc lỗi phía máy chủ? – Brandon
Tôi đã thêm Client Entry và Client Router vào bài đăng. Tôi tin rằng họ là phía máy chủ? Mặc dù tôi gặp lỗi này trong bảng điều khiển của mình Cảnh báo: React.createElement: loại không được rỗng, không xác định, boolean hoặc số. Nó phải là một chuỗi (cho các phần tử DOM) hoặc một ReactClass (cho các thành phần hỗn hợp). – trattles