Express.js服务器端渲染 - 请求'/ json / version / [英] Express.js Server Side Rendering - Request '/json/version/
问题描述
我已经运行了一个快速服务器来预渲染我的反应应用程序。我有一个路由文件，匹配HomeContainer到基本路由 / ，所有其他路由匹配到找不到的页面。
I've got an express server running to pre-render my react application. I've got a routes file that matches the HomeContainer to the base route / and all other routes match to page not found.
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路线之前渲染。
The problem I'm having is when I run the application on the server the page not found route gets rendered before quickly changing to the HomeContainer route.
我发现这是因为我的快递服务器正在向 / json / version 发出请求它向 / 发出请求，此路由与我的路由文件中的路由不匹配，因此呈现未找到页面的组件。
I've identified that this is occurring because my express server is making a request to /json/version before it makes a request to /, this route doesn't match one in my routes file and therefore the page not found component is rendered.
现在我不知道为什么它提出这个请求以及如何阻止页面找不到组件在家庭容器之前呈现。我已经尝试调试节点服务器和最早的地方我可以找到这个被引用的路径是在一个名为 _http_server.js
Now what I don't get is why it's making this request and how to stop the page not found component being rendered before the home container. I've tried debugging the node server and the earliest place I can find this path being referenced is in an emit call inside a file called _http_server.js
下面是调试器的屏幕截图，我找到了引用的URL。
Below is a screenshot of the debugger and where I found the URL being referenced.
另外作为参考，我在下面提供了我的快递服务器。
Also for reference, I've included my express server below.
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');
});
有谁知道为什么会发生这种情况以及如何解决我的问题？
Does anyone know why is this happening and how I can solve my problem?
编辑：这是一个显示问题的视频 - https://d26dzxoao6i3hh.cloudfront.net/items/2z3y3f1x3N1D2e422W42/Screen%20Recording%202017-10-23%20at%2012.24%20pm.mov
Here's a video showing the issue - https://d26dzxoao6i3hh.cloudfront.net/items/2z3y3f1x3N1D2e422W42/Screen%20Recording%202017-10-23%20at%2012.24%20pm.mov
推荐答案
我用运行我的节点应用程序后立即面临同样的问题 - 检查关键。这些对 / json 和 / json / version 的奇怪GET请求是由chrome检查员发送的。
I faced the same problem right after I had run my node application with --inspect key. These strange GET requests to /json and /json/version were sent by chrome inspector.
因此，解决方案（在我的情况下）是：
So, the solution (in my case) is:
- 转到
chrome：// inspect。 - 点击打开专用的DevTools for Node链接;
- 打开
连接标签。 - 从列表中删除您的终端。
- Go to
chrome://inspect. - Click the link "Open dedicated DevTools for Node";
- Open
Connectiontab. - Remove your endpoint from the list.
这篇关于Express.js服务器端渲染 - 请求'/ json / version /的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
