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

Question

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

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

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

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

Answer 1

我有同样的问题被证明是启用历史记录的 webpack 开发服务器-api-fallback 无法将这些 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
      }
    }
  }
}
...

Answer 2

将此添加到您的 webpack devServer 配置中也可以达到目的：

historyApiFallback: {
    disableDotRule: true
}

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

Dot and hyphen disallowed React Router URL parameters?

reactjs

react-router