How to match all routes under /xyz/*

Questions Routing
1

Hi,

I’m trying to integrate React into existing Ember app and I would like to have a dedicated route in the ember app where the React is instantiated and then it is not touched by Ember.

I have one template in app/routes/react-route.hbs and then I’ve defined this in the router.js

Router.map(function() {
  this.route('react-route');
});

The problem is that once some of the sub-routes are accessed, it fails with error. I would need somehow to tell ember that all of those

/react-route
/react-route?queryParam=10
/react-route/another-subroute
/react-route/...

should go to the react-route.hbs template. Also when transitioning from /react-route/a to /react-route/b it should not care.

Is this possible with ember router?

2

Ember supports wildcard/glob routes so maybe you could try something like

  this.route('react-route', { path: '/reacty/*' });
3

sadly none of these work

this.route('react-route', { path: '/react-route/*' });

// or 
this.route('react-route', function () {
  this.route('index', { path: '/*path'});
});

// or
this.route('react-route', { path: '/react-route/*path' });

all of them fail with UnrecognizedURLError.

From the guides, it’s not really clear how to construct such a route. I can’t use catch-all route because I still want to have a 404 route in my app.