Next.js与TypeScript从零起步学习笔记-3.参数传递

接上节内容,此文章,会介绍参数传递 参考官网:https://nextjs.org/learn/basics/getting-started 开发环境: window10 x64 node v10.16.3 npm v6.13.4 1.参数传递 1.1. query strings传递 这个没什么特别,就是把参数放到url,然后另一个页面通过url接收罢了. 我们现在在home页加一个跳转链接,点击时候跳转到about页,顺带把'from_home'这个参数值传过去. 修改'pages/index.tsx'文件,加上如下代码: to about page 如图1: 图1.png 然后我们修改'pages/about.tsx'文件,让它接收一下参数,启动一下,就能看到效果. //pages/about.tsx import Header from '../components/Header'; import { useRouter } from 'next/router'; //引入路由 const About = () => { const router = useRouter(); //初始化路由 return ( ); } export default About; 启动服务器,在home页点击'to about page',可以看到效果,如图2: 图2.png 1.2. 路由传递 通过query strings传递,url是这个样子的:'http://localhost:3000/about?param=from_home' 有人会觉得这样不好看,参数暴露之类的,那么我们是否能约束一下,自定义一个传递格式呢? 答案是肯定的,这里介绍路由传递: ps:官网都是用id做例子,但我觉得id太正式,难免让人联想到id是不是特殊字段,不能变?如图3,官网示例 如图3官网示例.png 自己测了一下,其实并不一定要命名为'id',你改其他名字也行. 首先,我们需要在'pages'文件夹下建一个新文件夹加'p',然后'p'文件夹下创建一个文件'[param].tsx',这个文件名"[param]"表示路由参数的名字,然后我们在[param].tsx敲入如下代码: //pages/p/[param].tsx import { useRouter } from 'next/router'; //引入路由 const DynamicRouting = () => { const router = useRouter(); //初始化路由 return ( ); } export default DynamicRouting; 如图4: 如图4.png 现在,我们在home页面,写一个链接跳转过去路由传递页面([param].tsx) 在'page/index.tsx'添加如下代码 //pages/index.tsx

to about page by route 如图5: 如图5.png 注意蓝色图5的蓝色框,那是参数,在'pages/p/[param].tsx'中,会通过'router.query.param'拿到.保存一下,可以在浏览器看到效果,如图6: 图6.png

本文章由javascript技术分享原创和收集