How to handle the "route does not match" on the Ember.js and 404 pages?

Question

How can I handle the error

Uncaught Error: No route matched the URL '...' 

and show user page 404?

---

Note. This question was asked before, but answered a few months ago - but it no longer works.

Answer 1

 App.Router.map(function() { //set up all of your known routes, and then... this.route("fourOhFour", { path: "*path"}); }); 

.. where you defined your FourOhFourRoute to display the "no route found" message of your choice. You will be able to access the originally requested path in the fourOhFour route as a path parameter.

EDIT: just for the sake of clarity - this answer came after others said they no longer work.

EDIT 2: I updated the answer to reflect Yehuda Katz's comment (if I'm wrong, please LMK).

Answer 2

Here is an example:

I am defining the last route in my router using a wildcard pattern: http://emberjs.com/guides/routing/defining-your-routes/#toc_wildcard-globbing-routes

I have a /not-found route, see the last route defined in my /*path router to catch any text string, see https://github.com/pixelhandler/blog/blob/master/client/app/ router.js # L19

 Router.map(function () { this.route('about'); this.resource('posts', function () { this.resource('post', { path: ':post_slug' }); }); this.resource('admin', function () { this.route('create'); this.route('edit', { path: ':edit_id' }); }); this.route('not-found', { path: '/*path' }); }); 

This route redirects to /not-found , see https://github.com/pixelhandler/blog/blob/master/client/app/routes/not-found.js

 import Ember from 'ember'; export default Ember.Route.extend({ redirect: function () { var url = this.router.location.formatURL('/not-found'); if (window.location.pathname !== url) { this.transitionTo('/not-found'); } } }); 

Also, any route that has a hook (e.g. model , beforeModel , afterModel ) that gives a rejected promise can use the error action to jump to 404.

 actions: { error: function (error) { Ember.Logger.error(error); this.transitionTo('/not-found'); } } 

What the not-found template does, see https://github.com/pixelhandler/blog/blob/master/client/app/templates/not-found.hbs

 <h1>404 Not Found</h1> <p> Perhaps you have a link that has changed, see {{#link-to 'posts'}}Archives{{/link-to}}. </p> 

Here is my 404 page: http://pixelhandler.com/not-found

Answer 3

At the end of your router, you can try adding the entire route:

 App.Router.map(function() { this.resource('post', ...); this.resource('user', ...); this.route('catchAll', { path: '/*' }); }); App.CatchAllRoute = ... 

Answer 4

In Ember 2.x

Inside the App.Router.map function App.Router.map enter the code below the end of the callback function.

 this.route('your_handler_route_name', { path: '/*path' }）； 

Now for each route NOT catche, the route your_handler_route_name will be bound to the previously defined routes.

Answer 5

Solution 1

To display the contents of 404:

 App.Router.reopen({ handleURL: function (url) { try { return this._super(url); } catch (error) { if (error.message.match(/No route matched the URL/)) { return this._super('/404'); } } } }); 

If you want to change the url to 404:

 App.Router.reopen({ location: locationImplementation, handleURL: function (url) { try { return this._super(url); } catch (error) { if (error.message.match(/No route matched the URL/)) { this.transitionTo('404'); return this._super('/404'); } } } }); 

To understand what happened here, see line 22636 in ember rc2 .

Decision 2

Analyzing the current URL and checking for the presence of a path or resource using App.Router.router.recognizer.hasRoute('route.path.goes.here');