Next.js是一個新的通用JavaScript框架，它為基于React和服務(wù)器的Web應(yīng)用提供了一個新的可選方案巨柒。
Next.js目前已經(jīng)開源樱拴，https://zeit.co/blog/next
現(xiàn)在我們知道如何創(chuàng)建一個簡單的Next.js應(yīng)用并運行它。我們的簡單應(yīng)用只有一個頁面洋满，但是我們可以添加任意多的頁面晶乔。例如,我們可以創(chuàng)建一個“About”頁面,將下面的內(nèi)容添加到 pages/about.js:
export default () => (
<div>
<p>This is the about page</p>
</div>
)
然后我們可以訪問那個頁面通過 http://localhost:3000/about
在那之后，我們需要連接這些頁面牺勾。我們可以使用HTML的“a”標(biāo)簽正罢。然而，它不會執(zhí)行客戶端導(dǎo)航;它通過服務(wù)器導(dǎo)航到頁面驻民，這不是我們想要的翻具。
為了支持客戶端導(dǎo)航袱饭，我們需要使用Next.js API的Link,這時可以導(dǎo)入 next/link
讓我們看看如何使用它。
安裝
為了跟上這節(jié)課的學(xué)習(xí)呛占，你需要有一個簡單的Next.js應(yīng)用虑乖。為此,繼續(xù)上一節(jié)課的工作，或者下載下面的示例應(yīng)用程序:
git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout getting-started
你可以通過以下命令執(zhí)行:
你可以用它來運行它:
現(xiàn)在晾虑，您可以通過導(dǎo)航 http://localhost:3000/ 來訪問該應(yīng)用程序疹味。
使用Link
現(xiàn)在我們將使用 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
這里我們導(dǎo)入了 next/Link 作為鏈接帜篇，然后使用它:
<Link href="/about">
<a>About Page</a>
</Link>
現(xiàn)在嘗試訪問 http://localhost:3000/
然后點擊“About Page”鏈接糙捺。它將導(dǎo)航你到“About”頁面。
這是客戶端導(dǎo)航;這個動作發(fā)生在瀏覽器中笙隙，不向服務(wù)器發(fā)出請求洪灯。
您可以通過打開瀏覽器的網(wǎng)絡(luò)請求檢查器來驗證這一點。
好了竟痰，現(xiàn)在我們有一個簡單的任務(wù):
- 訪問http://localhost:3000 /
- 然后點擊“About Page”
- 然后點擊瀏覽器的后退按鈕
你最好如何形容的后退按鈕的經(jīng)驗签钩？
客戶端訪問歷史支持
當(dāng)你點擊后退按鈕時，它通過客戶端將頁面導(dǎo)航到 index 頁面; next/link 為你處理了所有的 location.history
您甚至不需要編寫哪怕一行的客戶端路由代碼坏快。
Link的樣式
大多數(shù)時候,我們可能想要對我們的鏈接定義樣式铅檩。這就是我們?nèi)绾巫龅降?
<Link href="/about">
<a style={{ fontSize: 20 }}>About Page</a>
</Link>
一旦添加了這個，您就可以看到該樣式正確地應(yīng)用了莽鸿。
那么這樣做會怎么樣呢?
<Link href="/about" style={{ fontSize: 20 }}>
<a>About Page</a>
</Link>
上面的代碼發(fā)生了什么變化?
Link只是一個高階組件(HOC)
實際上昧旨，next/link 的樣式屬性支持沒有效果。那是因為 next/link 僅僅是一個高階組件祥得，它只接受“href”和一些類似的屬性兔沃。如果需要對其進(jìn)行樣式化，則需要對其底層組件進(jìn)行處理级及。
按鈕鏈接
假設(shè)我們需要使用一個“button”而不是一個錨點來連接我們的鏈接乒疏。然后我們需要像這樣編輯我們的導(dǎo)航代碼:
<Link href="/about">
<button>Go to About Page</button>
</Link>
當(dāng)你點擊index頁面上的button時會發(fā)生什么?
Link適用于所有東西
就像一個button一樣，您可以在一個Link中放置任何定制的響應(yīng)組件甚至是div创千。
在一個Link中放置組件的唯一要求是缰雇，它們應(yīng)該接受一個onClick的屬性入偷。
鏈接很簡單追驴，但功能強(qiáng)大
這里我們只討論了 next/link 最基本的用法. 有一些有趣的方法來使用它，我們將在接下來的課程中學(xué)習(xí)它們疏之。
與此同時殿雪，我們來看看 Next.js 的路由文檔。你會發(fā)現(xiàn)它很有用锋爪。
