ShadCnでボタン押したら遷移させたい

Posted at 2024-11-11

shadCnのButtonコンポーネントを使ったときに遷移ってどうすればいいのかわからなかったりしませんか？

今回はその解決方法を紹介したいと思います。

Linkコンポーネントを埋め込む

結論から言うとLinkコンポーネントを埋め込み、下のようにasChildをつけるとできます。

<Button className={style.button} asChild>
  <Link href={`/signin`}>
    <GoogleLogo width="18px" />
    <p>サインイン</p>
  </Link>
</Button>

asChildをつけることでスタイルを崩さずに、Linkコンポーネントによる遷移機能や使うことができます。

ちなみにこの解決方法はドキュメントに執筆されています。

ドキュメントには下のように記述されており、asChildをつけるとコンポーネントをネストできると書いてありますね。

Alternatively, you can set the asChild parameter and nest the link component.

ドキュメントを読むと解決できることが書かれていることが多いです。

英語で読むのは難しいですが、困ったらドキュメントを読む癖をつけていくことをお勧めします。

という当の本人も読むの苦手です

という感じでドキュメント読むと解決することが多いです。
ぜひ参考にしてください。