用户登录

Next.js 框架提供了很多种重定向的方法,下面我们试一下直接通过 Next.js 的配置文件配置需要的重定向。

打开项目根目录下的 next.config.js,这是应用的配置文件,在这个 nextConfig 里面配置一下重定向,添加一个 async 方法,名字叫 redirects,它返回的东西就是要做的一些重定向。

返回一个数组,里面的每个项目都是一个对象,对象里的 source 属性的值就是要做重定向的地址,比如 /about-us ,然后用 destination 配置一下重定向到的位置,比如 /about,再用 permanent 设置一下这个重定向是否是永久的重定向,如果是就把它的值设置成 true,如果是临时的重定向就把它设置成 false。

这样用户在访问 /about-us 这个地址的时候,就会被重定向到 /about 这个页面。

参数

重定向地址里面可以添加参数或者用正规表达式匹配需要做重定向的地址。再添加一个对象,source 设置成 /articles/:id,再把 destination 设置成 /posts/:id,然后把 permanent 设置成 true。

条件

在配置的重定向里面还可以设置一下条件,比如要求包含特定的头部或者查询符等等,下面再试一下,添加一个重定向对象,source 设置成 / 表示应用的根,destination 设置成 /posts,permanent 设置成 true,在这条重定向里面,用 has 设置一下条件,一个数组,里面添加一个对象,type 是 query, key 是 sort,value 设置成 latest。这样如果访问应用首页的时候,如果地址里的 sort 查询符的值是 latest,就会被重定向到 /posts 。

测试

在终端,停止运行开发服务,重新再运行一次。

在浏览器测试一下,先访问一下 /about-us 这个地址,会被重定向到 /about 这个页面上。再试一下,访问 /articles/3,会被重定向到 /posts/3 这个地址上。 再访问一下应用首页,然后在地址里添加一个 sort 查询符,值设置成 latest,访问这个地址会被重定向到 /posts 。

配置 Next.js 应用的重定向(redirects)《 Next.js:应用路由 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点