成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

silenceboy / 3476人閱讀

摘要：原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(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)頁面一次為基礎(chǔ)我們一篇博客的

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


學(xué)習(xí) Next.js: 入門
學(xué)習(xí) Next.js: 頁面之間的導(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: 部署
使用路由掩碼創(chuàng)建干凈的URL

在前面的課程中, 我們學(xué)到了如何使用查詢串創(chuàng)建動(dòng)態(tài)頁面. 一次為基礎(chǔ), 我們一篇博客的鏈接會(huì)想這樣: http://localhost:3000/post?title=Hello%20Next.js

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

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

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

設(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 create-dynamic-pages

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

npm install
npm run dev

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

路由掩碼

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

現(xiàn)在, 我們來給我們的博客地址添加一個(gè)路由掩碼.

pages/index.js 的內(nèi)容修改為如下:

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

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

export default () => (
  
    
    My Blog
    
    
      
      
      
      
    
    
      
)

    看一下下面的這個(gè)代碼塊:

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

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

    現(xiàn)在點(diǎn)擊博客標(biāo)題鏈接, 進(jìn)入博客內(nèi)容頁.

    歷史感知

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

    重加載

    現(xiàn)在, 轉(zhuǎn)到主頁: http://localhost:3000/, 然后點(diǎn)擊第一個(gè)博客標(biāo)題, 你會(huì)被導(dǎo)航到博客內(nèi)容頁面.

    點(diǎn)擊刷新按鈕重新加載頁面, 會(huì)發(fā)生什么?

    404

    頁面刷新操作放回了一個(gè) 404 錯(cuò)誤頁面. 這是因?yàn)? 我們?cè)俜?wù)器上沒有一個(gè)這樣的可加載頁面. 服務(wù)器會(huì)試圖去加載 p/hello-next.js 文件, 但是實(shí)際上這個(gè)文件是不存在的, 我們現(xiàn)在只有兩個(gè)文件 index.js 和 post.js.

    因此, 我們需要解決這個(gè)問題.

    在下一節(jié)課中, 我們使用Next.js的自定義服務(wù)器API來解決這個(gè)問題.

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

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

    相關(guān)文章

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

      摘要：原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(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)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: 頁面...

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

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

      摘要：原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(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)頁面現(xiàn)在我們知道了如何使用多個(gè)頁面創(chuàng)建一個(gè)基本的應(yīng)用程序?yàn)榱藙?chuàng)建頁面我們需要在磁盤上創(chuàng)建 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: ...

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

    • 學(xué)習(xí) Next.js: 入門

      摘要：原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(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)建一個(gè)的標(biāo)簽謝謝現(xiàn)暫時(shí)放在標(biāo)簽下面了新建文章有時(shí)間限制一會(huì)全部發(fā)上來這是最近兩天 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: ...

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

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

      摘要：原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(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í)部署頁面之間的導(dǎo)航現(xiàn)在我們知道了如何創(chuàng)建一個(gè)應(yīng)用程序并且運(yùn)行它我們的示例應(yīng)用程序只有一個(gè)簡(jiǎn)單的頁面但 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: ...

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

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

      摘要：原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(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í)部署使用共享組件我們知道是和頁面相關(guān)的通過導(dǎo)出一個(gè)組件創(chuàng)建一個(gè)頁面然后把它放到目錄中基于這個(gè)文件名存 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: ...

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

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

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <