頁面跳轉

Next.js中的頁面

在 Next.js 中,頁面是從 pages資料夾中的文件導出的 React 組件。

頁面根據其 文件名 來做路由。例如,在開發中:

  • pages/index.js 是對應 / 來做路由.
  • pages/posts/first-post.js 是對應 /posts/first-post  來做路由.

我們已經有了 pages/index.js 檔案,所以讓我們創建 pages/posts/first-post.js 來看看它是如何工作的。

創建一個新新頁面

Create the posts directory under pages. 在pages資料夾下創建一個posts的資料夾

posts資料夾底下創建一個叫first-post.js的檔案包含以下程式碼:

export default function FirstPost() { return <h1>First Post</h1>; }

這個組件可以取任何名字, 但您必須將其exportdefault。 現在,確保開發伺服器正在運行並訪問 http://localhost:3000/posts/first-post. 你應該會看到頁面:

這就是在Next.js中創建不同頁面的方法.

只需在pages目錄下創建一個JS文件,文件的路徑就變成了URL路徑。

在某種程度上,這類似於使用 HTML 或 PHP 文件構建網站。您無需編寫 HTML,而是編寫 JSX 並使用 React 組件。

讓我們添加一個指向新頁面的連結,以便我們可以從主頁跳轉到它。

小試身手

如果你想添加一個新的路由 /authors/me,文件名是什麼(包括目錄)?

返回上一頁 ← 前往下一頁 →
本篇文章由iga00257

iga00257

貢獻翻譯。瞭解如何參與貢獻