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

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

# パンくず機能とは
サイトの上の方にあるページの移動の軌跡の表示したもののこと。
<img width="1102" alt="スクリーンショット 2020-05-12 23.37.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636322/6ed7b2c0-96c5-74d2-e4e1-d93b94e3f03d.png">
メルカリでいうところのヘッダーの下にあるこれのことです。

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

```ruby:Gemfile
gem "gretel"
```
を追記します。
bundle installも忘れずに。

---
###②ファイルの生成

```ruby
$ rails generate gretel:install
```
このコマンドで以下のようなファイルができます。

```ruby: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`).
```
---

###③実際に表示するための変更点
現在はトップページの記述のみが自動生成されている状態です。
ここからユーザーのマイページにつなげようとすると

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

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

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

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

```ruby:view
- breadcrumb :mypage
= breadcrumbs pretext: "",separator: " &rsaquo; ", class: "breadcrumbs-list"
```
を追記します。
1行目の- breadcrumbに続いてconfig/breadcrumbs.rb内で定義したキーを記述しています。
2行目のpretextとseparatorはオプションでそれぞれ

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

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


---
以上の記述でページに下の写真のような表示が出ます。
<img width="427" alt="スクリーンショット 2020-05-13 0.20.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636322/e05b43a4-475e-16cb-29cc-a4a6f54a0640.png">

####④親の設定と出会したエラー
config/breadcrumbs.rbに

```ruby: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とするとマイページを親としていいね一覧のページを表示することができるそうです。

しかしこの記述でいいね一覧のページに遷移してみると...
<img width="1440" alt="スクリーンショット 2020-05-13 0.26.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636322/0e357e90-57a1-d551-3080-3775cf28b122.png">
のようにエラーが出ました。

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

```ruby: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

~省略~
```

と追記することでエラーが解消して以下のように正常に表示されました。
<img width="582" alt="スクリーンショット 2020-05-13 0.32.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636322/858a7db2-0601-5d97-a696-5575e7c173f3.png">

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

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