React-router: :paramName doesn't match URL segments containing dot '.' and hyphen '-'

[capouch]

The documentation for Router parameters indicates that

:paramName – matches a URL segment up to the next /, ?, or #. The matched string is called a param

But when I pass in this URL:

/zoomer/stmarks.tif-1461881719816

against this route:

<Route path="zoomer/:imageId" component={ Zoom }/>

The route doesn't match and 404s. Removing the period and hyphen fixes the problem.

Am I misunderstanding the documentation? Those characters shouldn't have to be escaped. . .

[taion]

This works fine for me. Possibly a dupe of https://github.com/reactjs/react-router/issues/3402? If you can put together a repro plus information on browser details, we'd be happy to take a look.

[capouch]

I duped the repo to a cloud server to send you and VERY STRANGE: Same browser environment (Chrome Beta) and same server environment (Node running webpack bundle) but the localhost instance gives me an error but the cloud one works just fine. After some playing it looks like URLs of the form localhost/zoomer/<path with dots/hyphens> breaks, but http://127.0.0.1/zoomer<same path> works just fine.

Sorry for the noise, thanks for the help.

[nindavidw]

I tried react-router with history, and I am getting same issue.
When I enter http://localhost:8080/token/some.token, it gives me error, but when I enter http://localhost:8080/token/sometoken, it works fine.
@taion , or any one from React Community Member can help me with this?

Here's my repo that shows error. https://github.com/SergeyKorchevskiy/react-router-issue-example
Let me describe the steps for running app for convenience.

$ git clone [email protected]:SergeyKorchevskiy/react-router-issue-example.git
$ cd react-router-issue-example
$ npm i
$ npm start

Open the web browser, and go to http://localhost:8080/token/some.token

[taion]

This is most likely an issue with your server config.

[kalmanb]

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

[mcrawshaw]

I only had an issue with period (not hyphen). I resolved by adding this to my webpack dev server config:

  historyApiFallback: {
    disableDotRule: true
  }

See https://github.com/bripkens/connect-history-api-fallback/issues/25