パンくず機能の実装と実装の際に出たエラー　　　ActionController::UrlGenerationError

8063 ワード
パンくずリスト Ruby Rails Ruby テキストリンク

某スクールの最終課題でパンくず機能を実装した際の思い出です。

パンくず機能とは

サイトの上の方にあるページの移動の軌跡の表示したもののこと。

メルカリでいうところのヘッダーの下にあるこれのことです。

①gem 'gretel'の導入

パンくず機能を実装するのに便利なgem。
お洒落な名前してますね。
Gemfileに

Gemfile
gem "gretel"

を追記します。
bundle installも忘れずに。

②ファイルの生成

$ rails generate gretel:install

このコマンドで以下のようなファイルができます。

config/breadcrumbs.rb
crumb :root do
  link "Home", root_path
end

# crumb :projects do
#   link "Projects", projects_path
# end

# crumb :project do |project|
#   link project.name, project_path(project)
#   parent :projects
# end

# crumb :project_issues do |project|
#   link "Issues", project_issues_path(project)
#   parent :project, project
# end

# crumb :issue do |issue|
#   link issue.title, issue_path(issue)
#   parent :project_issues, issue.project
# end

# If you want to split your breadcrumbs configuration over multiple files, you
# can create a folder named `config/breadcrumbs` and put your configuration
# files there. All *.rb files (e.g. `frontend.rb` or `products.rb`) in that
# folder are loaded and reloaded automatically when you change them, just like
# this file (`config/breadcrumbs.rb`).

③実際に表示するための変更点

現在はトップページの記述のみが自動生成されている状態です。
ここからユーザーのマイページにつなげようとすると

config/breadcrumbs.rb
crumb :root do
  link "Home", root_path
end

crumb :mypage do
  link "マイページ", user_path
end

# crumb :viewファイルで呼び出す際の名前 do
#   link "実際に表示される文章", 表示するページのパス
# end　　　　　　　　　　　　　　　　　　の形で記載

~省略~

という記述を追記してパンくず機能を表示したいマイページのビューファイルの表示したい場所に

view
- breadcrumb :mypage
= breadcrumbs pretext: "",separator: " › ", class: "breadcrumbs-list"

を追記します。
1行目の- breadcrumbに続いてconfig/breadcrumbs.rb内で定義したキーを記述しています。
2行目のpretextとseparatorはオプションでそれぞれ

・pretext...パンくずリストの頭に表示される文章。
・separator...パンくずリストの区切り肩を指定。上の記述だと「›」で区切られる。

他にもオプションの種類はあるようなので調べてみてください。

以上の記述でページに下の写真のような表示が出ます。

④親の設定と出会したエラー

config/breadcrumbs.rbに

config/breadcrumbs.rb
crumb :root do
  link "Home", root_path
end

crumb :mypage do
  link "マイページ", user_path
end

crumb :likes do
  link "いいね一覧", likes_users_path
  parent :mypage
end

~省略~

のようにparent :mypageとするとマイページを親としていいね一覧のページを表示することができるそうです。

しかしこの記述でいいね一覧のページに遷移してみると...

のようにエラーが出ました。

おそらくですがマイページのパスが　/users/:idだったのですがこの:idの値が取得できないためにエラーが出たのだと思います。
なのでconfig/breadcrumbs.rbのマイページの記述に

config/breadcrumbs.rb
crumb :root do
  link "Home", root_path
end

crumb :mypage do
  link "マイページ", user_path(current_user.id) #　←　(current_user.id)を追記
end

crumb :likes do
  link "いいね一覧", likes_users_path
  parent :mypage
end

~省略~

と追記することでエラーが解消して以下のように正常に表示されました。

以上で基本の実装は終わりです。

今回実装の参考にさせていただいた記事
https://qiita.com/Azure0701/items/16de34a0010eb7f05d89

解析Json——操作JsonObject
ES 6新規構文(3)——対象