next的路由外传

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 默认的服务端渲染的情况下

1. 匹配 pages 下的路由的时候,使用正常 query 的形式进行路由匹配或者传参.最好不要使用路由隐藏.否则就需要进行自定义服务端渲染.
2. 匹配 pages 下 post 文件夹下的子路径[id].js 的时候,使用<Link href={/post/${item.id}}>的形式进行路由匹配.路由隐藏功能可以不用.
3. pages 目录下不要有同名的文件或者文件夹(重要!!!)

一图流

image