web-dev-qa-db-ja.com

Ember.jsで「一致するルートがない」を処理して404ページを表示する方法

エラーを処理する方法

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

カスタム404ページを表示しますか？

注：この質問は以前に尋ねられたものであり、 回答済み 数か月前-が機能しなくなりました。

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

..選択した「ルートが見つかりません」メッセージを表示するようにFourOhFourRouteを定義している場所。パスパラメータとして、fourOhFourルートで最初にリクエストされたパスにアクセスできるようになります。

編集：明確にするために-この答えは、他の人がもう機能しないと報告された後に出されました。

編集2：イェフダ・カッツのコメントを反映するように答えを更新しました（私が間違っている場合は、LMKをお願いします）。

55
laurelnaiad

次に例を示します。

ワイルドカードルートを使用してルーターの最後のルートを定義します。以下を参照してください http://emberjs.com/guides/routing/defining-your-routes/#toc_wildcard-globbing-routes

私は/not-foundルートを持っています。ルーターで定義された最後のルート/*pathを参照して、テキスト文字列をキャッチしてください。参照： 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' });
});

そのルートは/not-foundへのリダイレクトを行います。以下を参照してください： 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');
    }
  }
});

また、結果としてプロミスが拒否されるフック（例：model、beforeModel、afterModel）を持つルートは、errorアクションを使用して、 404。

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

not-foundテンプレートをレンダリングします。次を参照してください： 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>

これが私の404ページです： http://pixelhandler.com/not-found

12
pixelhandler

ルーターの最後にキャッチオールルートを追加してみてください。

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

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

In Ember 2.x

App.Router.map関数内で、コールバック関数の末尾の下にコードを配置します。

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

今度はすべてのルートが[〜＃〜] not [〜＃〜]以前に定義されたルートによってキャッチされ、your_handler_route_nameルートによってキャッチされます。

1
Lorem Ipsum Dolor

ソリューション1

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');
                }
            }
        }
    });
_

URLも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');
                }
            }
        }
    });
_

ここで何が起こったかを理解するには、ember rc2の_22636_行を参照してください。

ソリューション2

現在のURLを解析し、App.Router.router.recognizer.hasRoute('route.path.goes.here');を使用してルートまたはリソースが存在するかどうかを確認します

0
Wojciech Bednarski