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

layman 發布于2019-08-20 16:54 / 2799人閱讀

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署頁面之間的導航現在我們知道了如何創建一個應用程序并且運行它我們的示例應用程序只有一個簡單的頁面但

原始文檔在 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 () => {
  
    This is the about page
  
}

然后, 我們可以打開 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 = () => (
  
    
      About Page
    
    Hello Next.js
  
)

export default Index

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


  About Page

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

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

下面是一個簡單的任務:

訪問 http://localhost:3000/

點擊 "About Page"

點擊瀏覽器的后退按鈕

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

客戶端歷史支持

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

你需要做的只是簡單的連接頁面而已, 就這樣!

給連接添加樣式

大多數情況, 我們可能想要給連接添加一點樣式. 想下面這樣:


  About Page

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

但是, 如果你想下面一樣呢, 會發生什么?


  About Page

對的, 沒任何效果!

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

實際上, 樣式屬性在 next/link 上是沒有效果的. 因為 next/link 僅僅是一個能夠接收 href 屬性, 以及其他屬性的高階主鍵. 如果你要給它設置樣式, 需要在底層的組件進行設置.

使用按鈕進行連接

現在, 我們需要一個按鈕而不是一個連接, 現在我們需要修改我們的導航代碼, 像這樣:

讓連接能夠任意工作

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

連接雖然簡單, 但是強大

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83246.html

學習 Next.js: 使用共享組件

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署使用共享組件我們知道是和頁面相關的通過導出一個組件創建一個頁面然后把它放到目錄中基于這個文件名存原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: ...

Steve_Wang_ 2019-08-20 16:56 評論0 收藏0
學習 Next.js: 使用路由掩碼創建干凈的URL

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署使用路由掩碼創建干凈的在前面的課程中我們學到了如何使用查詢串創建動態頁面一次為基礎我們一篇博客的原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: ...

silenceboy 2019-08-20 16:56 評論0 收藏0
學習 Next.js: 清潔URL的服務器支持

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署干凈的服務器支持在前面的課程中我們學習了如何為我們的應用程序創建干凈的基本上我們讓像這樣但是原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: 頁面...

Lionad-Morotar 2019-08-20 16:56 評論0 收藏0
學習 Next.js: 獲取數據

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署為頁面獲取數據得益于路由的優點我們知道了如何創建一個具有簡介的應用程序實際上我們通常需要從遠程數原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: ...

NotFound 2019-08-20 16:56 評論0 收藏0
學習 Next.js: 創建動態內容

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署創建動態頁面現在我們知道了如何使用多個頁面創建一個基本的應用程序為了創建頁面我們需要在磁盤上創建原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: ...

caohaoyu 2019-08-20 16:56 評論0 收藏0