Next.js dynamic router All In One
dynamic routes
demos
- 单层动态路由
/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
- 多层嵌套动态路由
pages/post/[pid]/[comment].js
import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { pid, comment } = router.query
return <p>Post: {pid}, {comment}</p>
}
export default Post
- 不定层级动态路由
pages/post/[...slug].js
Catch all routes
捕捉所有路由
// `/post/a`
{ "slug": ["a"] }
// `/post/a/b`
{ "slug": ["a", "b"] }
https://github.com/vercel/next.js/tree/canary/examples/catch-all-routes
- 可选不定层级动态路由
pages/post/[[...slug]].js
Optional catch all routes
可选捕获所有路由
{ }
// GET `/post` (empty object)
{ "slug": ["a"] }
// `GET /post/a` (single-element array)
{ "slug": ["a", "b"] }
// `GET /post/a/b` (multi-element array)
Link
import Link from 'next/link'
function Home() {
return (
<ul>
<li>
<Link href="/post/abc">Go to pages/post/[pid].js</Link>
</li>
<li>
<Link href="/post/abc?foo=bar">Also goes to pages/post/[pid].js</Link>
</li>
<li>
<Link href="/post/abc/a-comment">
Go to pages/post/[pid]/[comment].js
</Link>
</li>
</ul>
)
}
export default Home
https://nextjs.org/docs/routing/introduction#linking-between-pages
https://nextjs.org/docs/api-reference/next/link
refs
https://nextjs.org/learn/basics/dynamic-routes
https://nextjs.org/docs/routing/dynamic-routes
https://nextjs.org/docs/routing/introduction
https://github.com/vercel/next.js/tree/canary/examples/dynamic-routing
https://nextjs.org/docs/advanced-features/automatic-static-optimization
https://github.com/vercel/next.js
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载
标签：pid,dynamic,js,https,router,post,pages From： https://www.cnblogs.com/xgqfrms/p/16855384.html