Closed3
【Next.js】ページ遷移方法2種
何について書く?
- Next.js ページ遷移方法2種とNG例
内容
- Linkを使用(最良の方法)
import Link from 'next/link'
function Home() {
return (
<ul>
<li>
<Link href="/about">
<a>About Us</a>
</Link>
</li>
</ul>
)
}
export default Home
- Routeを使用
import Router from 'next/router'
const handler = (path) => {
Router.push(path)
}
export default () => (
<button onClick={()=>handler('/about')}>Click </button>
)
- <a>タグ使用NGパターン
export default () => (
<a href='about'>Click </a>
)
- すべて同じ/aboutへアクセスするが、NGパターンの<a>を使用した場合、全て更新を行ってしまいNEXTの良さがなくなってしまう。 最良の方法をLinkとしたのは、Route.pushがこのメソッドは next/link では不十分な場合に役立つと記載が公式にあったためまずはLinkを使用するべきと判断した。
- この不十分な場合について、今後深堀りしてこちらの記事を更新していく予定。
参考サイト
Linkはchildrenが文字列の場合は自動的にaタグを挿入してくれるそうです!
教えて頂き誠にありがとうございます!
このスクラップは2022/04/17にクローズされました