尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

迁移到 Next.js

迁移到 Next.js by using paths is not for . In Next.js you can add to a page (param将其指向一个路由, 这个路由也被称为网址片段, 或者被称为网址, 并包含相关内容。该页面地址是pages/post, 属于网站内部页面分类路径。pid.js:import { useRouter } from next/routerconst Post () {const router useRouter()const { pid } router.queryreturn pPost: {pid}p}export default PostAny 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?foobar will have the query :{ foo: bar, pid: abc }, route will query with the same name. For , the route /post/abc?pid123 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/linkfunction Home() {return (ulliLink href/post/abcaGo to pages/post/[pid].jsaLinkliliLink href/post/abc?foobaraAlso goes to pages/post/[pid].jsaLinkliliLink href/post/abc/a-commentaGo to pages/post/[pid]/[comment].jsaLinkliul)}export default Home你可以查阅相关的文档, 这样可以了解到更多的内容信息。can be to catch all paths by three dots (...) the . For :注意: 除了slug这个名称以外, 您还可以使用其他的名称比如。...paramwill 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的更多相关信息。
返回列表