webpack-dev-middleware 通过所有路由

Question

我在客户端上使用webpack-dev-middleware以及使用react-router的react应用程序。

如果我在根/输入应用程序，一切都很好，但是webpack-dev-middleware不会提供任何带有路径的内容，例如"/my-route">

server.use(webpackDevMiddleware(compiler, {
    publicPath: '/'
}));

我尝试使用通配符，它允许所有路径通过并获取 html 页面，但似乎当页面请求main.js时，它现在也获取 html 页面，而不是打包的 javascript。

server.use('/*', webpackDevMiddleware(compiler, {
    publicPath: '/'
}));

目标是服务器不知道的任何路由都获得与根相同的内容，然后 react-router 将处理在客户端上显示正确的视图(或 404(。

任何帮助将不胜感激。

Answer 1

尝试连接历史 api-fallback npm 包，这是 webpack-dev-server 在后台用于相同目的的包。

这对我有用：

var history = require('connect-history-api-fallback');
server.use(history());
server.use(webpackDevMiddleware(compiler, {
  publicPath: '/'
}));

Answer 2

我遇到了同样的问题，我的解决方案是更新反应路由器配置和反应路由器-dom软件包。无需进一步操作。

我从 4.x 升级到 5.0.1(在两个包中(。