Next.js - 路由
Next.js 使用基于文件系统的路由器。每当我们将任何页面添加到 pages 目录时，它都会自动通过 url 提供。以下是此路由器的规则。
索引路由 − 文件夹中的 index.js 文件映射到目录的根目录。例如 −
pages/index.js 映射到 '/'。
pages/posts/index.js 映射到 '/posts'。
嵌套路由 − 页面目录中的任何嵌套文件夹结构，因为路由器 url 会自动提供。例如 −
pages/settings/dashboard/about.js 映射到 '/settings/dashboard/about'。
pages/posts/first.js 映射到 '/posts/first'。
动态路由 − 我们也可以使用命名参数来匹配 url。使用括号。例如 −
pages/posts/[id].js 映射到 '/posts/:id'，我们可以使用类似 '/posts/1' 的 URL。
pages/[user]/settings.js 映射到 '/posts/:user/settings'，我们可以使用类似 '/abc/settings' 的 URL。
pages/posts/[...all].js 映射到 '/posts/*'，我们可以使用类似 '/posts/2020/jun/' 的任何 URL。
页面链接
Next.JS 允许使用 Link react 组件在客户端链接页面。它具有以下属性 −
href − pages 目录中页面的名称。例如 /posts/first 指的是 pages/posts 目录中的 first.js。
让我们创建一个示例来演示相同内容。
在此示例中，我们将更新 index.js 和 first.js 页面以进行服务器访问以获取数据。
让我们更新 Global CSS Support 一章中使用的 nextjs 项目。
按如下方式更新 pages 目录中的 index.js 文件。
import Link from 'next/link'
import Head from 'next/head'
function HomePage(props) {
return (
<>
<Head>
<title>Welcome to Next.js!</title>
</Head>
<div>Welcome to Next.js!</div>
<Link href="/posts/first">> <a>First Post</a></Link>
<br/>
<div>Next stars: {props.stars}</div>
<img src="/logo.png" alt="TutorialsPoint Logo" />
</>
)
}
export async function getServerSideProps(context) {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const json = await res.json()
return {
props: { stars: json.stargazers_count }
}
}
export default HomePage
启动 Next.js 服务器
运行以下命令启动服务器 −.
npm run dev > nextjs@1.0.0 dev \Node extjs > next ready - started server on http://localhost:3000 event - compiled successfully event - build page: / wait - compiling... event - compiled successfully event - build page: /next/dist/pages/_error wait - compiling... event - compiled successfully
验证输出
在浏览器中打开 localhost:3000，您将看到以下输出。
单击"第一篇帖子"链接。
