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）。非常感谢您提供的任何帮助。

- MattoTodd

---

在您注册所有路由之后，webpack dev服务器是否是最终的中间件？ - corvid

Answer 1

试试connect-history-api-fallback npm包，这是webpack-dev-server在幕后使用的相同目的。

这对我很有效：

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

- Accu

Answer 2

我曾经遇到过同样的问题，我的解决方案是更新 react-router-config 和 react-router-dom 包。不需要进一步的操作。

我从 4.x 版本升级到了 5.0.1 版本（两个包都是如此）。

- Raunhofer