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

问题描述

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

I am working to implement an image viewer and using React Router. Uploaded image files are of the format <name>.<type-suffix>-<date-tag>, with a period and a hypen as delimiters.

给定这条路线:<Route path="zoomer/:imageId" component={ Zoom }/> 和这个 URL http://localhost:8080/zoomer/medMain.tif-1461839237863 路由器似乎没有找到匹配项.

Given this route: <Route path="zoomer/:imageId" component={ Zoom }/> and this URL http://localhost:8080/zoomer/medMain.tif-1461839237863 it does not seem that the router is finding a match.

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

If I remove the dot and the hyphen (e.g. http://localhost:8080/zoomer/medMaintif1461839237863) routing works just fine, but I really need to keep those delimiters for semantic reasons. And URLEncode() won't help me here, either.

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

Is there something I need to do with the Route spec to fix this?

推荐答案

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

I had the same issue proved to be webpack dev server with history-api-fallback enabled failed to pass these urls to the react app. Hacked webpack config to pass these to react with:

...
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
      }
    }
  }
}
...

这篇关于点和连字符不允许 React Router URL 参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！