next.js 之路由
之前我们在使用路由匹配页面的时候,分别使用了 /post?id=id来匹配 pages 下的 post.js 或 /post/[id]来匹配 pages 下 post 目录中的[id].js.这是必须的么?
新建 pages/post.js
import { useRouter } from "next/router";
import Layout from "../components/layout/MyLayout";
const Content = () => {
const router = useRouter();
return (
<Layout>
<h1>这里是pages目录下的post</h1>
<h2>{router.query.id}</h2>
</Layout>
);
};
export default Content;
情况一,只有 pages/post.js
然后使用 Link 匹配页面
<Link href={`/post?id=${item.id}`}></Link>
通过访问http://localhost:6688/post?id=975%7D,页面是正常加载的.此时刷新一下,发现页面依旧正常.
使用另外的方式匹配
<Link href={`/post/[id]`}></Link>
点击链接路径http://localhost:6688/post/[id],直接404.
情况二,只有 pages/post.js,且使用了使用了路由隐藏
然后我们更改 Link 为
<Link href={`/post?id=${item.id}`} as={`/post/${item.id}`}></Link>
再次访问http://localhost:6688/post?id=975%7D,浏览器的url会变成http://localhost:6688/post/975,这样看上去很棒.刷新一下试试呢? 404 页面了,实际上 next 并不知道/post/id 代表 pages 下的哪一个文件.所以就直接进行报错处理
情况三,同时存在 pages/post.js 和 pages/post/[id].js
使用
<Link href={`/post?id=${item.id}`}></Link>
点击链接进入http://localhost:6688/post?id=975%7D,页面显示这里是pages目录下的post,刷新页面依旧能够保留.
使用
<Link href={`/post/[id]`}></Link>
点击链接进入http://localhost:6688/post/[id],页面显示这里是pages目录下的post的[id].js文件,刷新页面依旧能够保留.
情况四,同时存在 pages/post.js 和 pages/post/[id].js,且使用路由隐藏
使用
<Link href={`/post?id=${item.id}`} as={`/post/${item.id}`}></Link>
点击链接http://localhost:6688/post?id=975%7D,浏览器url会显示http://localhost:6688/post/975,页面显示这里是pages目录下的post.
但是刷新一下,页面显示就变为了这里是 pages 目录下的 post 的[id].js 文件
使用
<Link href={`/post/[id]`} as={`/post/${item.id}`}></Link>
点击链接http://localhost:6688/post/[id],浏览器url显示http://localhost:6688/post/975,页面显示这里是pages目录下的post的[id].js文件
情况五,只存在 pages/post/[id].js
删了 pages 下的 post.js 文件
使用
<Link href={`/post?id=${item.id}`}></Link>
点击链接直接 404
使用
<Link href={`/post/[id]`}></Link>
点击链接http://localhost:6688/post/[id],浏览器url显示http://localhost:6688/post/[id],页面显示这里是pages目录下的post的[id].js文件
情况六,只存在 pages/post/[id].js,且使用路由隐藏
使用
<Link href={`/post?id=${item.id}`} as={`/post/${item.id}`}></Link>
点击链接,浏览器 url 显示http://localhost:6688/post/975,页面显示这里是pages目录下的post的[id].js文件.刷新保留
使用
<Link href={`/post/[id]`} as={`/post/${item.id}`}></Link>
点击链接,浏览器 url 显示http://localhost:6688/post/975,页面显示**这里是 pages 目录下的 post 的[id].js 文件**,刷新保留
总结
<Link href="/post/[id]" as={/post/${item.id}}>这个并不是写错,而是一个官方案例的写法,故意写成这样的.作为 href 文件系统路径，它不应在运行时更改.
以下情况都是在使用 next 默认的服务端渲染的情况下
- 匹配 pages 下的路由的时候,使用正常 query 的形式进行路由匹配或者传参.最好不要使用路由隐藏.否则就需要进行自定义服务端渲染.
- 匹配 pages 下 post 文件夹下的子路径[id].js 的时候,使用
<Link href={/post/${item.id}}>的形式进行路由匹配.路由隐藏功能可以不用. - pages 目录下不要有同名的文件或者文件夹(重要!!!)
一图流
