TehShrike / abstract-state-router

The best way to structure a single-page webapp.
http://tehshrike.github.io/state-router-example
296 stars 26 forks source link

A dot/period(.) in url for a named parameter returns an error #127

Closed heardy closed 5 years ago

heardy commented 5 years ago

When adding a state that includes a named parameter eg /user/:userId, if the named parameter portion of the url includes a dot (eg. /user/123.345) you get the error Cannot GET <path> (see screenshot)

Route code

stateRouter.addState({
    name: 'app.user',
    route: 'user/:userId',
    template: User,
    resolve: (data, parameters, cb) => {
      const {userId} = parameters;
      cb(undefined, { userId });
    }
  });

Result

Screen Shot 2019-04-17 at 9 12 41 am
subpx commented 5 years ago

@heardy I've had a look at this and I think that ASR is working as expected. If you are using webpack dev server, maybe something to do with how it is handling dots in urls?

TehShrike commented 5 years ago

That looks like a message from your server, not something to do with ASR – I would guess that your server has some rule that says "for any route, server up this same index.html file", but that rule doesn't cover routes with periods?

heardy commented 5 years ago

Thanks guys. It was an issue with the server not ASR.

For anyone interested, the issue was with webpack-dev-server. I needed to use disableDotRule: true setting in the historyApiFallback option.

In webpack.config.js (see https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback)

devServer: {
  historyApiFallback: {
    disableDotRule: true
  }
}