October Saturday,30th 2021: PM

ActiveLink | Next.jsのコードレビュー

実行環境

"next": "^12.0.1"
"react": "^17.0.2"
"react-dom": "^17.0.2"
"eslint": "^7.32.0"

比較演算===を見ます。

router.asPathとprops.hrefが一致するか比較されます。

一致した場合真になりif文の処理であるprops.activeClassNameをclassNameに代入する処理が行われます。

今回私は動的ルーティングで使うためasPathにしました。

例によって[id]ですがこれによって生成されたページのURLとprops.hrefは一致しました。

return

classNameを返すことによって、activeClassNameとして動くclassNameという2個目の実体を定義します。

router

router.pathnameは現在のページをパスとして認識しリンクの判定を識別するものです。

今のページがhrefと一致するならばActiveLinkが作動するという仕組みです。

Children.only? is not

Childrenのonlyは子要素を持たない場合に限定する目的で使われるReact公式の最上位APIに書かれているメソッドです。

裏を返せばdom要素で下の階層を持つ場合エラーを返す処理です。

今回の場合Next.jsはActiveLinkでaタグをラップすることになるので不要です。

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND

https://www.carlrippon.com/react-children-with-typescript/

https://ja.reactjs.org/docs/react-api.html

https://blog.ojisan.io/react-component-words/