Matching an empty route and a trailing slash in Backbone route?

Question

I know that there are some issues with having duplicate content (SEO), but that is not something that my project is concerned with.

In my backbone router, I have this :

routes: {
    "": "startOrder",
    "order/:orderNumber/:stepName": "getOrder",
    "order/:orderNumber/:stepName/": "getOrder"
},

Notice that the second and third routes lead to the same thing.

The problem is if someone enters a URL ending with simply the "/" character, I would like it to call a separate function (and then remove the slash), but this doesn't happen, it always matches to the blank route. Then I get issues later on because the URL has a slash where it shouldn't.

Am I missing something?

Answer 1

It is now possible to put a slash within parenthesis as an optional part of the route:

var Router = Backbone.Router.extend({
  routes: {
    'order/:orderNumber/:stepName(/)': 'getOrder'
  },
  // ...
});

From a pretty comprehensive issue thread on the topic of slashes at the end of Backbone routes.

But as also noted in that thread, to prevent multiple URLs being recorded for your pages it's best to remove the slash at the end of paths in Apache or other server configuration.

Answer 2

it's always matching to the blank route instead of no match because you're probably not starting Backbone.history.start with { pushState: true }, so start it like this Backbone.history.start({pushState: true });

if you want a route that matches anything that ends with a /, you can use a *splat and end it with a /. something like this should work:

routes: {
    "": "startOrder",
    "order/:orderNumber/:stepName": "getOrder",
    "order/:orderNumber/:stepName/": "getOrder",
    "*dummy/": "endsWithSlash"
}

make sure that the dummy route is last. otherwise, the dummy route will get matched before your order with a slash.

Answer 3

This routes is internally converted into regular expressions. You can pass raw regular expression through route method with your two cases