☰
迁移到 Next.js
2026/9/28 4:53:43 网站建设 项目流程

by using paths is not for . In Next.js you can add to a page (

param

将其指向一个路由, 这个路由也被称为网址片段, 或者被称为网址, 并包含相关内容。

该页面地址是pages/post, 属于网站内部页面分类路径。

pid

.js:

import { useRouter } from 'next/router'

const Post = () => {

const router = useRouter()

const { pid } = router.query

return <p>Post: {pid}p>

}

export default Post

Any route like /post/1, /post/abc, etc. will be by pages/post/

pid

.js. The path will be sent as a query to the page, and it will be with the other query .

For , the route /post/abc will have the query :

{ "pid": "abc" }

, the route /post/abc?foo=bar will have the query :

{ "foo": "bar", "pid": "abc" }

, route will query with the same name. For , the route /post/abc?pid=123 will have the query :

{ "pid": "abc" }

route work the same way. The page pages/post/

pid

.js will match the route /post/abc/a- and its query will be:

{ "pid": "abc", "comment": "a-comment" }

我们来把侧边的部分, 和一起进行配置。如果我们希望使用上面所提到的链接方法, 也就是通过next/link来进行跳转操作的话, 最终的页面呈现效果会是这样的情况:

import Link from 'next/link'

function Home() {

return (

<ul>

<li>

<Link href="/post/abc">

<a>Go to pages/post/[pid].jsa>

Link>

li>

<li>

<Link href="/post/abc?

foo=bar">

<a>Also goes to pages/post/[pid].jsa>

Link>

li>

<li>

<Link href="/post/abc/a-comment">

<a>Go to pages/post/[pid]/[comment].jsa>

Link>

li>

ul>

)

}

export default Home

你可以查阅相关的文档, 这样可以了解到更多的内容信息。

can be to catch all paths by three dots (...) the . For :

注意: 除了slug这个名称以外, 您还可以使用其他的名称比如。

...param

will be sent as a query (slug in the ) to the page, and it will be an array, so, the path /post/a will have the query :

{ "slug": ["a"] }

And in the case of /post/a/b,and any other path, new will be added to the array, like so:

{ "slug": ["a", "b"] }

那个 catch all 能够在在(里面被制造出来。

当前没有提供具体的内容。

).

对于每篇文章对应的页面, 例如 post 路径所在的网页。

...slug

.js会匹配/post, /post/a, 以及/post/a/b等类似的路径。

最主要的一个情况, 还有就是那个叫做catch all以及还是那个叫catch all的情况是, 带着一个斜杠的路线(就是在上面给出的例子中的/post), 它的那个路线也是那样的。

查询结果是这样的, 具体如下所示。

{ } // GET `/post` (empty object)

{ "slug": ["a"] } // `GET /post/a` (single-element array)

{ "slug": ["a", "b"] } // `GET /post/a/b` (multi-element array)

Pages that are by will be their route , i.e query will be an empty ({}).

After , Next.js will an to your to the route in the query .

要想了解接下来需要做哪些事情, 我们可以提供更多信息。

使用下一个链接组件, 与旁边的一边进行匹配。

关于Next.js的更多相关信息。

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询