How to match all routes under /xyz/*


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 {

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


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?

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

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

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.