用户登录

现在 post 页面的地址有点难看,可以使用 next 提供的 Route Masking 重新设计一下这个地址 .. 打开 index 页面 .. 给这个 ListItem 组件里用的 Link 组件,添加一个 as 属性 .. 它的值就是链接的新地址 .. /p/ 后面加上 props 里的 id 属性的值 ..

使用 ListItem 组件的时候,给它提供一个 id 属性 .. 设置一下对应的值 .. hello-ninghao .. 同样下面这个 ListItem 也需要处理一下 .. learn-next ..

回到浏览器,再试一下 .. 点击一个列表项目 .. 注意现在打开的页面的地址,就是我们使用 Link 的 as 属性重新设计的 ..

按一下 返回 .. 可以返回到上一次打开的页面 ..

再打开一个链接项目 .. 然后可以刷新一下页面 .. 会提示 404 .. 因为当前访问的页面实际上是不存在的 .. 我们可以通过自定义服务端接口解决这个问题 ..

简洁地址(Route Masking)《 Next.js:前端应用框架 》

统计

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

社会化网络

关于

微信订阅号

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