Laravel9 パンくずリスト 詳細ページへのリンク

Laravel9でのパンくずリストの小技をご紹介します。(2022/12/8 現在)

Laravelでdiglactic/laravel-breadcrumbsというパッケージを使用して
タイトルにある通り、詳細ページへのリンクの設定方法をご紹介します。
この記事では、diglactic/laravel-breadcrumbsの詳しい説明は省略します。

ファイルの確認

<?php 

// Home
Breadcrumbs::for('home', function ($trail) {
    $trail->push('ホーム', route('home'));
});

// Home > News list
Breadcrumbs::for('news/list', function ($trail) {
    $trail->parent('home');
    $trail->push('ニュース一覧', url('news/list'));
});

// Home > News list > News detail
Breadcrumbs::for('news/detail/{id}', function ($trail) {
    $trail->parent('news/list');
    $trail->push('ニュース詳細', url('news/detail/{id}'));
});

// Home > News list > News detail > Comments
Breadcrumbs::for('news/detail/{id}/comments', function ($trail) {
    $trail->parent('news/detail');
    $trail->push('コメント一覧', url('news/detail/{id}/comments'));
});

画面遷移は、ホーム→ニュース一覧→ニュース詳細→コメント一覧 という動きを想定しており、
コメント一覧まで遷移した際に、パンくずリストの「ニュース詳細」をクリックしたらエラーが発生する
という状態です。
なぜなら、この状態で「ニュース詳細」をクリックした場合、URLは「http(s)://domain.com/news/detail/{id}」となるからです。
この{id}をパラメータとして扱いたいのに、それができないという状態です。

ここから、詳細ページに遷移できるように修正します。

修正ソースコード

<?php 

// ホーム
Breadcrumbs::for('home', function ($trail) {
    $trail->push('ホーム', route('home'));
});

// ホーム > ニュース一覧
Breadcrumbs::for('news/list', function ($trail) {
    $trail->parent('home');
    $trail->push('ニュース一覧', url('news/list'));
});

// ホーム > ニュース一覧 > ニュース詳細
Breadcrumbs::for('news/detail/{id}', function ($trail) {
    $trail->parent('news/list');
    $trail->push('ニュース詳細', url('news/detail/'.request()->id));
});

// ホーム > ニュース一覧 > ニュース詳細 > コメント一覧
Breadcrumbs::for('news/detail/{id}/comments', function ($trail) {
    $trail->parent('news/detail');
    $trail->push('コメント一覧', url('news/detail/{id}/comments'));
});

17行目で、パラメータ(id)を取得して、文字列に連結させます。

コメント

タイトルとURLをコピーしました