点和连字符不允许 React Router URL 参数？

Question

我正在努力实现图像查看器并使用 React Router。上传的图片文件格式为<name>.<type-suffix>-<date-tag>，以句号和连字符为分隔符。

鉴于此 route:<Route path="zoomer/:imageId" component={ Zoom }/>和此 URL http://localhost:8080/zoomer/medMain.tif-1461839237863，路由器似乎没有找到匹配项。

如果我删除点和连字符（例如http://localhost:8080/zoomer/medMaintif1461839237863）路由工作得很好，但出于语义原因我真的需要保留这些分隔符。而且 URLEncode() 在这里也帮不了我。

我需要对 Route 规范做些什么来解决这个问题吗？

Answer 1

将此添加到您的 webpack devServer 配置也可以解决问题：

historyApiFallback: {
    disableDotRule: true
}

Answer 2

我遇到了同样的问题，事实证明是启用了history-api-fallback的webpack开发服务器无法将这些url传递给react应用程序。破解 webpack 配置以传递这些内容以进行反应：

...
devServer: {
  proxy: {
    '/*.*': { // Match all URL's with period/dot
      target: 'http://localhost:8080/',  // send to webpack dev server
      rewrite: function(req){
        req.url='index.html';  // Send to react app
      }
    }
  }
}
...