學習 Next.js: 頁面之間的導航

原始文檔在 https://github.com/developerw... 如今搬過來.

學習 Next.js: 入門
學習 Next.js: 頁面之間的導航
學習 Next.js: 使用共享組件
學習 Next.js: 建立動態內容
學習 Next.js: 使用路由掩碼建立乾淨的URL
學習 Next.js: 乾淨URL的服務器支持
學習 Next.js: 獲取數據
學習 Next.js: 部署

頁面之間的導航

如今咱們知道了如何建立一個Next.js應用程序而且運行它. 咱們的示例應用程序只有一個簡單的頁面, 可是若是你想, 能夠添加更多的頁面. 例如, 能夠建立一個 "About" 頁面, 並添加內容到 pages/about.js.

export default () => {
  <div>
    <p>This is the about page</p>
  </div>
}

而後, 咱們能夠打開 http://localhost:3000/about 來訪問這個頁面. 而後咱們須要連接這些頁面, 使用HTML的 "a" 標籤, 可是它並不會執行客戶端導航, 它是執行的服務器端導航, 這並非咱們想要的.

爲了支持客戶端導航, 咱們須要使用Next.js 的Link API, 它是經過 next/link 導出的. 下面咱們來看看如何使用它.

設置

爲了按照本課程學習, 須要有一個示例Next.js應用程序, 爲此, 你能夠下載下面的這個應用程序做爲學習案例:

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout getting-started

能夠用下面的命令來運行:

npm install
npm run dev

如今, 訪問 http://localhost:3000/.

使用 Link

如今咱們將會使用 next/link 來鏈接咱們的頁面. 添加以下代碼到 page/index.js 模塊文件

// This is the Link API
import Link from 'next/link'

const Index = () => (
  <div>
    <Link href="/about">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
)

export default Index

在這個例子中, 咱們導入了 next/link 做爲 Link 模塊, 而且向下面這樣使用它:

<Link href="/about">
  <a>About Page</a>
</Link>

如今, 再次訪問 http://localhost:3000/, 點擊 "About Page" 鏈接, 你將被帶到 "About Page" 頁面.

這是客戶端導航, 行爲發生在客戶端, 沒有請求服務器. 你能夠打開瀏覽器開發工具的網絡標籤, 看看有沒有網絡請求來驗證.

下面是一個簡單的任務:

• 訪問 http://localhost:3000/

• 點擊 "About Page"

• 點擊瀏覽器的後退按鈕

描述一下, 點擊後退按鈕後你看到了什麼? 是的, 客戶端導航把你帶回了Index頁面.

客戶端歷史支持

當你點擊後退按鈕的時候, Next.js把你帶回了Index頁面, 這個過程徹底是客戶端實現的; next/link 爲你處理了全部 location.history相關的事情. 你甚至不須要編寫任意一行客戶端路由代碼.

你須要作的只是簡單的鏈接頁面而已, 就這樣!

給鏈接添加樣式

大多數狀況, 咱們可能想要給鏈接添加一點樣式. 想下面這樣:

<Link href="/about">
  <a style={{ fontSize: 20 }}>About Page</a>
</Link>

添加了樣式後, 你會看到, 樣式被正確的設置了.

可是, 若是你想下面同樣呢, 會發生什麼?

<Link href="/about" style={{ fontSize: 20 }}>
  <a>About Page</a>
</Link>

對的, 沒任何效果!

鏈接僅僅是一個高階組件(HOC:Higher Order Component)

實際上, 樣式屬性在 next/link 上是沒有效果的. 由於 next/link 僅僅是一個可以接收 href 屬性, 以及其餘屬性的高階主鍵. 若是你要給它設置樣式, 須要在底層的組件進行設置.

使用按鈕進行鏈接

如今, 咱們須要一個按鈕而不是一個鏈接, 如今咱們須要修改咱們的導航代碼, 像這樣:

<Link href="/about">
  <button>Go to About Page</button>
</Link>

讓鏈接可以任意工做

就像一個按鈕同樣, 你能夠在Link中放置任何你的自定義React組件, 甚至是一個div元素.放在Link中的組件的惟一要求是, 它可以接受一個 onClick 屬性.

鏈接雖然簡單, 可是強大

這裏, 咱們只看到了關於 next/link 的很基本的例子. 接下來的課程咱們會更加深刻的瞭解如何使用Link. 若是你想要了解Next.js的路由功能, 參考 Next.js 路由文檔 文檔.