動態路由

優化 index 頁面

下一步,我們要更新 index 頁面(pages/index.js)。我們需要藉由 Link 組件為每個文章頁新增連結。

打開 pages/index.js 將以下引入 LinkDate 的程式碼添加到檔案的最上方:

import Link from 'next/link'; import Date from '../components/date';

然後在同一支檔案的 Home 組件底下,把 li 標籤替換成以下程式碼:

<li className={utilStyles.listItem} key={id}> <Link href={`/posts/${id}`}> <a>{title}</a> </Link> <br /> <small className={utilStyles.lightText}> <Date dateString={date} /> </small> </li>

如果你前往 http://localhost:3000 查看,在這個頁面已經可以連結到其他文章頁。

可連結到其他文章頁示意圖

如果哪裡出錯了,請確保你的程式碼長得像這個樣子

到此結束!在我們總結此課程之前,在下一階段我們來談談動態路由的一些小訣竅。

本篇文章由YONG-LIN-LIANG

YONG-LIN-LIANG

貢獻翻譯。瞭解如何參與貢獻