Question

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

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

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

我是否需要使用Route规范来修复此问题？

Answer 1

我有同样的问题证明是webpack dev服务器，启用了历史记录-api-fallback，无法将这些网址传递给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参数？

2 个答案: