學習 Next.js: 使用路由掩碼創建干凈的URL

silenceboy 發布于2019-08-20 16:56 / 3453人閱讀

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

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

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

使用路由掩碼創建干凈的URL

在前面的課程中, 我們學到了如何使用查詢串創建動態頁面. 一次為基礎, 我們一篇博客的鏈接會想這樣: http://localhost:3000/post?title=Hello%20Next.js

但是這個URL看起來不怎么好看, 如果我們想要下面這樣的鏈接, 我們應該怎么辦呢?

http://localhost:3000/p/hello-nextjs

看起來是不是好很多了, 是吧?

設置

為了按照本課程學習, 需要有一個示例Next.js應用程序, 為此, 你可以下載下面的這個應用程序作為學習案例:

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout create-dynamic-pages

可以用下面的命令來運行:

npm install
npm run dev

現在, 訪問 http://localhost:3000/.

路由掩碼

現在,我們將使用Next.js特有的叫做路由掩碼的功能. 基本上, 它在瀏覽器地址欄上顯示一個不同于實際URL的地址.

現在, 我們來給我們的博客地址添加一個路由掩碼.

pages/index.js 的內容修改為如下:

import Layout from "../components/MyLayout.js"
import Link from "next/link"

const PostLink = (props) => (
  
    
      {props.title}
    
  
)

export default () => (
  
    My Blog
    
      
      
      
    
  
)

看一下下面的這個代碼塊:

const PostLink = (props) => (
  
    
      {props.title}
    
  
)

在元素中, 我們使用另外一個叫做 as 的熟悉. 這是我們需要顯示在瀏覽器地址欄中的URL. 應用程序看到的實際URL是實際上是在 href 熟悉中.

現在點擊博客標題鏈接, 進入博客內容頁.

歷史感知

正如你所看到的, 路由掩碼, 也能夠很好的和瀏覽器歷史一起工作. 所有需要做的事情只是給鏈接添加了一個as屬性.

重加載

現在, 轉到主頁: http://localhost:3000/, 然后點擊第一個博客標題, 你會被導航到博客內容頁面.

點擊刷新按鈕重新加載頁面, 會發生什么?

404

頁面刷新操作放回了一個 404 錯誤頁面. 這是因為, 我們再服務器上沒有一個這樣的可加載頁面. 服務器會試圖去加載 p/hello-next.js 文件, 但是實際上這個文件是不存在的, 我們現在只有兩個文件 index.js 和 post.js.

因此, 我們需要解決這個問題.

在下一節課中, 我們使用Next.js的自定義服務器API來解決這個問題.

GPU云服務器云服務器 next.js next.js 樣式 url路由 url路由實現

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

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

學習 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: ...

caohaoyu 2019-08-20 16:56 評論0 收藏0
學習 Next.js: 入門

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署哪位分高的幫忙創建一個的標簽謝謝現暫時放在標簽下面了新建文章有時間限制一會全部發上來這是最近兩天原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: ...

Miracle 2019-08-20 16:54 評論0 收藏0
學習 Next.js: 頁面之間的導航

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

layman 2019-08-20 16:54 評論0 收藏0
學習 Next.js: 使用共享組件

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

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