成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

學(xué)習(xí) Next.js: 頁(yè)面之間的導(dǎo)航

layman / 2870人閱讀

摘要：原始文檔在現(xiàn)在搬過(guò)來(lái)學(xué)習(xí)入門(mén)學(xué)習(xí)頁(yè)面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動(dòng)態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署頁(yè)面之間的導(dǎo)航現(xiàn)在我們知道了如何創(chuàng)建一個(gè)應(yīng)用程序并且運(yùn)行它我們的示例應(yīng)用程序只有一個(gè)簡(jiǎn)單的頁(yè)面但

原始文檔在 https://github.com/developerw... 現(xiàn)在搬過(guò)來(lái).


學(xué)習(xí) Next.js: 入門(mén)
學(xué)習(xí) Next.js: 頁(yè)面之間的導(dǎo)航
學(xué)習(xí) Next.js: 使用共享組件
學(xué)習(xí) Next.js: 創(chuàng)建動(dòng)態(tài)內(nèi)容
學(xué)習(xí) Next.js: 使用路由掩碼創(chuàng)建干凈的URL
學(xué)習(xí) Next.js: 干凈URL的服務(wù)器支持
學(xué)習(xí) Next.js: 獲取數(shù)據(jù)
學(xué)習(xí) Next.js: 部署
頁(yè)面之間的導(dǎo)航

現(xiàn)在我們知道了如何創(chuàng)建一個(gè)Next.js應(yīng)用程序并且運(yùn)行它. 我們的示例應(yīng)用程序只有一個(gè)簡(jiǎn)單的頁(yè)面, 但是如果你想, 可以添加更多的頁(yè)面. 例如, 可以創(chuàng)建一個(gè) "About" 頁(yè)面, 并添加內(nèi)容到 pages/about.js.

export default () => {
  

    
This is the about page

  

}

然后, 我們可以打開(kāi) http://localhost:3000/about 來(lái)訪問(wèn)這個(gè)頁(yè)面. 然后我們需要鏈接這些頁(yè)面, 使用HTML的 "a" 標(biāo)簽, 但是它并不會(huì)執(zhí)行客戶端導(dǎo)航, 它是執(zhí)行的服務(wù)器端導(dǎo)航, 這并不是我們想要的.

為了支持客戶端導(dǎo)航, 我們需要使用Next.js 的Link API, 它是通過(guò) next/link 導(dǎo)出的. 下面我們來(lái)看看如何使用它.

設(shè)置

為了按照本課程學(xué)習(xí), 需要有一個(gè)示例Next.js應(yīng)用程序, 為此, 你可以下載下面的這個(gè)應(yīng)用程序作為學(xué)習(xí)案例:

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

可以用下面的命令來(lái)運(yùn)行:

npm install
npm run dev

現(xiàn)在, 訪問(wèn) http://localhost:3000/.

使用 Link

現(xiàn)在我們將會(huì)使用 next/link 來(lái)連接我們的頁(yè)面. 添加如下代碼到 page/index.js 模塊文件

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

const Index = () => (
  

    
      About Page
    
    
Hello Next.js

  

)

export default Index

在這個(gè)例子中, 我們導(dǎo)入了 next/link 作為 Link 模塊, 并且向下面這樣使用它:


  About Page

現(xiàn)在, 再次訪問(wèn) http://localhost:3000/, 點(diǎn)擊 "About Page" 連接, 你將被帶到 "About Page" 頁(yè)面.

這是客戶端導(dǎo)航, 行為發(fā)生在客戶端, 沒(méi)有請(qǐng)求服務(wù)器. 你可以打開(kāi)瀏覽器開(kāi)發(fā)工具的網(wǎng)絡(luò)標(biāo)簽, 看看有沒(méi)有網(wǎng)絡(luò)請(qǐng)求來(lái)驗(yàn)證.

下面是一個(gè)簡(jiǎn)單的任務(wù):

訪問(wèn) http://localhost:3000/

點(diǎn)擊 "About Page"

點(diǎn)擊瀏覽器的后退按鈕

描述一下, 點(diǎn)擊后退按鈕后你看到了什么? 是的, 客戶端導(dǎo)航把你帶回了Index頁(yè)面.

客戶端歷史支持

當(dāng)你點(diǎn)擊后退按鈕的時(shí)候, Next.js把你帶回了Index頁(yè)面, 這個(gè)過(guò)程完全是客戶端實(shí)現(xiàn)的; next/link 為你處理了所有 location.history相關(guān)的事情. 你甚至不需要編寫(xiě)任意一行客戶端路由代碼.

你需要做的只是簡(jiǎn)單的連接頁(yè)面而已, 就這樣!

給連接添加樣式

大多數(shù)情況, 我們可能想要給連接添加一點(diǎn)樣式. 想下面這樣:


  About Page

添加了樣式后, 你會(huì)看到, 樣式被正確的設(shè)置了.

但是, 如果你想下面一樣呢, 會(huì)發(fā)生什么?


  About Page

對(duì)的, 沒(méi)任何效果!

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

實(shí)際上, 樣式屬性在 next/link 上是沒(méi)有效果的. 因?yàn)?next/link 僅僅是一個(gè)能夠接收 href 屬性, 以及其他屬性的高階主鍵. 如果你要給它設(shè)置樣式, 需要在底層的組件進(jìn)行設(shè)置.

使用按鈕進(jìn)行連接

現(xiàn)在, 我們需要一個(gè)按鈕而不是一個(gè)連接, 現(xiàn)在我們需要修改我們的導(dǎo)航代碼, 像這樣:
讓連接能夠任意工作

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

連接雖然簡(jiǎn)單, 但是強(qiáng)大

這里, 我們只看到了關(guān)于 next/link 的很基本的例子. 接下來(lái)的課程我們會(huì)更加深入的了解如何使用Link. 如果你想要了解Next.js的路由功能, 參考 Next.js 路由文檔 文檔.

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://hztianpu.com/yun/83246.html

相關(guān)文章

  • 學(xué)習(xí) Next.js: 使用共享組件

    摘要：原始文檔在現(xiàn)在搬過(guò)來(lái)學(xué)習(xí)入門(mén)學(xué)習(xí)頁(yè)面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動(dòng)態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署使用共享組件我們知道是和頁(yè)面相關(guān)的通過(guò)導(dǎo)出一個(gè)組件創(chuàng)建一個(gè)頁(yè)面然后把它放到目錄中基于這個(gè)文件名存 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過(guò)來(lái). 學(xué)習(xí) Next.js: 入門(mén)學(xué)習(xí) Next.js: ...

    Steve_Wang_ 評(píng)論0 收藏0

  • 學(xué)習(xí) Next.js: 使用路由掩碼創(chuàng)建干凈的URL

    摘要：原始文檔在現(xiàn)在搬過(guò)來(lái)學(xué)習(xí)入門(mén)學(xué)習(xí)頁(yè)面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動(dòng)態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署使用路由掩碼創(chuàng)建干凈的在前面的課程中我們學(xué)到了如何使用查詢串創(chuàng)建動(dòng)態(tài)頁(yè)面一次為基礎(chǔ)我們一篇博客的 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過(guò)來(lái). 學(xué)習(xí) Next.js: 入門(mén)學(xué)習(xí) Next.js: ...

    silenceboy 評(píng)論0 收藏0

  • 學(xué)習(xí) Next.js: 清潔URL的服務(wù)器支持

    摘要：原始文檔在現(xiàn)在搬過(guò)來(lái)學(xué)習(xí)入門(mén)學(xué)習(xí)頁(yè)面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動(dòng)態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署干凈的服務(wù)器支持在前面的課程中我們學(xué)習(xí)了如何為我們的應(yīng)用程序創(chuàng)建干凈的基本上我們讓像這樣但是 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過(guò)來(lái). 學(xué)習(xí) Next.js: 入門(mén)學(xué)習(xí) Next.js: 頁(yè)面...

    Lionad-Morotar 評(píng)論0 收藏0

  • 學(xué)習(xí) Next.js: 獲取數(shù)據(jù)

    摘要：原始文檔在現(xiàn)在搬過(guò)來(lái)學(xué)習(xí)入門(mén)學(xué)習(xí)頁(yè)面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動(dòng)態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署為頁(yè)面獲取數(shù)據(jù)得益于路由的優(yōu)點(diǎn)我們知道了如何創(chuàng)建一個(gè)具有簡(jiǎn)介的應(yīng)用程序?qū)嶋H上我們通常需要從遠(yuǎn)程數(shù) 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過(guò)來(lái). 學(xué)習(xí) Next.js: 入門(mén)學(xué)習(xí) Next.js: ...

    NotFound 評(píng)論0 收藏0

  • 學(xué)習(xí) Next.js: 創(chuàng)建動(dòng)態(tài)內(nèi)容

    摘要：原始文檔在現(xiàn)在搬過(guò)來(lái)學(xué)習(xí)入門(mén)學(xué)習(xí)頁(yè)面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動(dòng)態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署創(chuàng)建動(dòng)態(tài)頁(yè)面現(xiàn)在我們知道了如何使用多個(gè)頁(yè)面創(chuàng)建一個(gè)基本的應(yīng)用程序?yàn)榱藙?chuàng)建頁(yè)面我們需要在磁盤(pán)上創(chuàng)建 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過(guò)來(lái). 學(xué)習(xí) Next.js: 入門(mén)學(xué)習(xí) Next.js: ...

    caohaoyu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<