Question

在我的React.js应用程序中，我有一条这样的路线：

/foo/foo.bar/foo

当我加载此URL（在浏览器上单击刷新）时，我得到：

Cannot GET /foo/foo.bar/foo

我认为问题在于Webpack Dev Server认为此URL引用静态资产并尝试加载它。

如何解决此问题？（我需要点）

Answer 1

更新了答案，因为我没有意识到您使用的是webpack dev服务器： 您可以在webpack.config.js中创建一个代理，将代理转发到/foo/foo.bar。您可以将请求转发到为index.html文件提供服务的另一个后端服务器，也可以覆盖代理并让它直接返回index.html。下面的示例配置

proxy: [
    {
        path: /\/foo\/foo.bar\/foo/,
        bypass: function(req, res, proxyOptions) {
            return '/index.html';
        }
    }
]

有点hacky，但它确实有效。

Answer 2

无需设置代理；您只需在Webpack配置中通过connect-history-api-fallback告诉Webpack（或更具体地说，它使用的setting disableDotRule to true）不要将其中带有点的路径视为静态资产：

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      disableDotRule: true
    }
  }
};

Webpack Dev Server，允许带有“dot”的路径

2 个答案: