Express.js服务器端渲染 - 请求'/ json/version /
woo*_*110 7 javascript json node.js express reactjs
我已经运行了一个快速服务器来预渲染我的反应应用程序.我有一个路由文件,将HomeContainer与基本/路由匹配,所有其他路由匹配到找不到的页面.
import HomeContainer from 'containers/home-container/home-container';
import PageNotFound from 'components/page-not-found/page-not-found';
const routes = [
{
path: '/',
exact: true,
component: HomeContainer
},
{
path: '*',
component: PageNotFound
}
];
export default routes;
我遇到的问题是当我在服务器上运行应用程序时,未找到的页面路由会在快速更改为HomeContainer路由之前呈现.
我已经确定这是因为我的快递服务器在发出请求/json/version之前发出请求/,此路由与我的路由文件中的路由不匹配,因此呈现了未找到页面的组件.
现在我没有得到的是为什么它正在提出这个请求以及如何停止page not found在主容器之前呈现的组件.我已经尝试调试节点服务器和最早的地方我可以找到这个被引用的路径是在一个名为的文件内的一个调用中调用_http_server.js
下面是调试器的屏幕截图,我找到了引用的URL.
另外作为参考,我在下面包括了我的快递服务器.
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import { StaticRouter, matchPath } from 'react-router-dom';
import serialize from 'serialize-javascript';
import expressStaticGzip from 'express-static-gzip';
import sourceMapSupport from 'source-map-support';
import routes from 'routes';
import configureStore from 'store';
import AppContainer from 'containers/app-container/app-container';
if (process.env.NODE_ENV === 'development') {
sourceMapSupport.install();
}
const app = express();
app.use(expressStaticGzip('./static/assets'));
app.get('*', (req, res, next) => {
const store = configureStore();
/**
* Load initial data into state
* match requested URL path to the component in routes
* check for 'fireInitialActions' method (found in the container components)
* and dispatch if it exists
*/
const routeComponentPromises = routes.reduce((accumulator, route) => {
if (matchPath(req.url, route) && route.component && route.component.fireInitialActions) {
accumulator.push(Promise.resolve(store.dispatch(route.component.fireInitialActions())));
}
return accumulator;
}, []);
Promise.all(routeComponentPromises)
.then(() => {
const context = {};
const markup = renderToString(
<Provider store={store}>
<StaticRouter location={req.url} context={context}>
<AppContainer />
</StaticRouter>
</Provider>
);
const initialData = store.getState();
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src='vendor.js' defer></script>
<script src='app.js' defer></script>
<script>window.__initialData__ = ${serialize(initialData)}</script>
</head>
<body>
<div id="root">${markup}</div>
</body>
</html>
`);
})
.catch(next);
});
app.listen(process.env.PORT || 3000, () => {
console.log('Server is listening');
});
有谁知道为什么会发生这种情况以及如何解决我的问题？
编辑:这是一个显示问题的视频 - https://d26dzxoao6i3hh.cloudfront.net/items/2z3y3f1x3N1D2e422W42/Screen%20Recording%202017-10-23%20at%2012.24%20pm.mov
小智 7
使用--inspect密钥运行节点应用程序后，我立即面临同样的问题。这些奇怪的GET请求/json，并/json/version通过镀铬督察发送。
所以，解决方案（就我而言）是：
- 去
chrome://inspect。 - 单击链接“为 Node 打开专用 DevTools”；
- 打开
Connection选项卡。 - 从列表中删除您的端点。
不能 100% 确定导致问题的原因，但我现在已经修复了它。
我所做的两个主要改变是
- 使用 EJS 作为模板引擎
indexFromEmptyFile在 gzip 插件中设置为 false
第 2 点似乎非常重要，如果没有它，快递将尝试提供服务index.html，而不是index.ejs这会导致与上面相同的问题，因为与index.html我的路线文件中的路线不匹配。
下面是更新的代码
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import { StaticRouter, matchPath } from 'react-router-dom';
import serialize from 'serialize-javascript';
import sourceMapSupport from 'source-map-support';
import expressStaticGzip from 'express-static-gzip';
import routes from 'routes';
import configureStore from 'store';
import AppContainer from 'containers/app-container/app-container';
if (process.env.NODE_ENV === 'development') {
sourceMapSupport.install();
}
const app = express();
app.set('views', './static/');
app.set('view engine', 'ejs');
app.use(expressStaticGzip('static/assets', { indexFromEmptyFile: false }));
app.get('*', (req, res, next) => {
const store = configureStore();
/**
* Load initial data into state
* match requested URL path to the component in routes
* check for 'fireInitialActions' method (found in the container components)
* and dispatch if it exists
* return as promises so we can chain
*/
const routeComponentPromises = routes.reduce((accumulator, route) => {
if (matchPath(req.url, route) && route.component && route.component.fireInitialActions) {
accumulator.push(Promise.resolve(store.dispatch(route.component.fireInitialActions())));
}
return accumulator;
}, []);
Promise.all(routeComponentPromises)
.then(() => {
const context = {};
const markup = renderToString(
<Provider store={store}>
<StaticRouter location={req.url} context={context}>
<AppContainer />
</StaticRouter>
</Provider>
);
const initialData = serialize(store.getState());
res.render('index.ejs', {initialData, markup});
})
.catch(next);
});
app.listen(process.env.PORT || 3000, () => {
console.log('Server is listening');
});`