web-dev-qa-db-fra.com

Comment gérer «aucun itinéraire correspondant» dans Ember.js et afficher la page 404?

Comment gérer l'erreur

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

et afficher une page 404 personnalisée?

Remarque: Cette question a été posée avant et répond il y a plusieurs mois - mais ne fonctionne plus.

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

.. où vous avez défini votre FourOhFourRoute pour afficher le message "aucun itinéraire trouvé" de votre choix. Vous pourrez accéder au chemin initialement demandé dans la route fourOhFour en tant que paramètre de chemin.

EDIT: juste pour plus de clarté - cette réponse est venue après que les autres ont été signalés de ne plus fonctionner.

EDIT 2: J'ai mis à jour la réponse pour refléter le commentaire de Yehuda Katz (si je me trompe, s'il vous plaît LMK).

55
laurelnaiad

Voici un exemple:

Je définis le dernier itinéraire dans mon routeur en utilisant un itinéraire générique voir: http://emberjs.com/guides/routing/defining-your-routes/#toc_wildcard-globbing-routes

J'ai un /not-found route, voir la dernière route définie dans mon routeur /*path pour attraper n'importe quelle chaîne de texte, voir: 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' });
});

Cette route effectue une redirection vers /not-found, voir: 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');
    }
  }
});

De plus, toute route ayant un hook (par exemple model, beforeModel, afterModel) qui entraîne une promesse rejetée, peut utiliser l'action error pour passer à la 404.

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

Ce qui rend un not-found modèle, voir: 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>

Voici ma page 404: http://pixelhandler.com/not-found

12
pixelhandler

Vous pouvez essayer d'ajouter une route fourre-tout à la fin de votre routeur:

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

App.CatchAllRoute = ...
6
James A. Rosen

En Ember 2.x

À l'intérieur de App.Router.map fonction, placez le code sous la fin de la fonction de rappel.

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

Maintenant, chaque itinéraire fait PAS les captures par les itinéraires définis précédemment seront capturées par your_handler_route_name route.

1
Lorem Ipsum Dolor

Solution 1

Pour afficher le contenu 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');
                }
            }
        }
    });

Si vous souhaitez également que l'URL passe au 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');
                }
            }
        }
    });

Pour comprendre ce qui s'est passé ici, voyez la ligne 22636 Dans ember rc2.

Solution 2

Analyser l'URL actuelle et vérifier s'il existe une route ou une ressource à l'aide de App.Router.router.recognizer.hasRoute('route.path.goes.here');

0
Wojciech Bednarski