# Override existing catch-all wildcard route

**URL:** <https://discuss.emberjs.com/t/override-existing-catch-all-wildcard-route/15717>\
**Category:** Routing\
**Created:** [October 25, 2018, 1:50pm UTC](https://discuss.emberjs.com/t/override-existing-catch-all-wildcard-route/15717 "2018-10-25T13:50:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kleinfreund](https://avatars.discourse-cdn.com/v4/letter/k/a6a055/32.png) [@kleinfreund](https://discuss.emberjs.com/u/kleinfreund)\
**Post date:** [October 25, 2018, 1:50pm UTC](https://discuss.emberjs.com/t/override-existing-catch-all-wildcard-route/15717/1 "2018-10-25T13:50:20Z")

</div>

The Ember application I’m working with has a catch-all wildcard route (i.e. `*path`). I cannot change this; however, I do want to have my own wildcard route. Since the existing route is applied after mine, it overrules my route. Thus, having my own catch-all wildcard route doesn’t work.

**How can I register another catch-all wildcard route in this scenario _or_ have my routes behave like one?**

I’m able to catch all requests with the following router:

```nohighlight
export default function () {
  // Matches single-segment paths.
  this.route('main-route', { path: '/:path' }, function () {
    // Optionally, matches subsequent segments.
    this.route('sub-route', { path: '*wildcard_path' });
  });
}

```

The problem here is that this directs all multi-segment paths to the route `main-route.sub-route`. I tried to redirect the route, but I had no success with that. In particular, I need to redirect/transition to `main-route` in such a way that its `beforeModel` hook is executed.

The `sub-route` looks like this:

```auto
export default Discourse.Route.extend({
  afterModel(model) {
    this.transitionTo('main-route', model);
  }
});

```

This transitions to `main-route` fine.

However, it’s different than for requests targetting the main route directly. Especially, the properties for `transition.intent` are set differently. There is no `transition.intent.url` (presumably because I targetted a route name, not a URL) and the URL in the address bar only contains the `path` segment of the main route without the `wildcard_path` segment.

* * *

I realize that this is a hack/workaround that is unnecessarily complex. If I could remove the existing wildcard route, I wouldn’t need to look for such a solution.

Any pointers that could help me here?

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [October 25, 2018, 8:23pm UTC](https://discuss.emberjs.com/t/override-existing-catch-all-wildcard-route/15717/2 "2018-10-25T20:23:00Z")

</div>

You could use two flat routes:

```auto
this.route('main-route', { path: '/:path' });
this.route('main-route-with-more-args', { path: '/:path/*wildcard_path' });

```

And then reexport the implementation of that route so `main-route-with-more-args` does the same thing as `main-route`:

```nohighlight
// app/routes/main-route-with-more-args.js
export { default } from './main-route';

// app/templates/main-route-with-more-args.js
export { default } from './main-route'

// app/controllers/main-route-with-more-args.js
export { default } from './main-route';

```

Alternatively, maybe the nested structure you already have is OK. The `beforeModel` hook in `main-route` _will_ fire when you enter either URL. It won’t re-fire if you switch between them, but for that you could use `beforeModel` in `main-route.index` and `main-route.sub-route`.

---

<div class="post-metadata">

**Author:** ![kleinfreund](https://avatars.discourse-cdn.com/v4/letter/k/a6a055/32.png) [@kleinfreund](https://discuss.emberjs.com/u/kleinfreund)\
**Post date:** [November 1, 2018, 9:11am UTC](https://discuss.emberjs.com/t/override-existing-catch-all-wildcard-route/15717/3 "2018-11-01T09:11:46Z")

</div>

Ah, thank you. I considered simply duplicating the implementation, but quickly decided against it since I would need to maintain both implementations simultaneously all the time. I did not think about the routes as modules that I could simply re-export.

In my case, the following is sufficient:

```nohighlight
// app/routes/main-route-duplicate.js
export { default } from './main-route';

```

The missing piece now is what you mentioned last: Switching between the paths that are covered by my main route doesn’t seem to trigger hooks I load my content with.

In `beforeModel`, I fetch more content via AJAX. This doesn’t seem to happen for all transitions. I’ll see whether I can work out how to do this.

---

<div class="post-metadata">

**Author:** ![kleinfreund](https://avatars.discourse-cdn.com/v4/letter/k/a6a055/32.png) [@kleinfreund](https://discuss.emberjs.com/u/kleinfreund)\
**Post date:** [November 1, 2018, 1:40pm UTC](https://discuss.emberjs.com/t/override-existing-catch-all-wildcard-route/15717/4 "2018-11-01T13:40:02Z")

</div>

When invoking the main route for a multi-segment path and then navigating to a single-segment path, the model hooks are not triggered because `main-route` is a parent route of `main-route.duplicate`.

```nohighlight
export default function () {
  this.route('main-route', { path: '/:path' }, function () {
    this.route('duplicate', { path: '*wildcard_path' });
  });
}

```

```nohighlight
// app/routes/main-route-duplicate.js
export { default } from './main-route';

```

Instead, I created two routes on the same level both exporting the implementation of `main-route`:

```nohighlight
export default function () {
  this.route('main-route.single-segment', { path: '/:path' });
  this.route('main-route.multi-segment', { path: '/:path/*wildcard' });
}

```

So far, this looks very promising.