我有一个正在运行的快速服务器来预渲染我的反应应用程序。我有一个将 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 https://d26dzxoao6i3hh.cloudfront.net/items/2z3y3f1x3N1D2e422W42/Screen%20Recording%202017-10-23%20at%2012.24%20pm.mov
