react-router路由传参的3中形式
1 使用react-router中的Link标签进行跳转
1.0 使用url传递参数(刷新之后路由参数不会丢失)
1.1 在这里你要调到那个页面,讲形参写在该路由的path后面,具体格式,见下图
1.2 获取传递过来的参数
2. 使用state传递参数【不会在url中显示具体参数】
这种形式有两种书写格式
0. 也是使用Link进行跳转,但不在Route的path中书写书写形参
- 使用js的格式跳转
2.0 使用state,&使用Link进行路由传参
不需要写任何形参
2.1 使用state,&使用JS进行路由传参
3. 使用query传递参数【不会在url中显示,刷新子页面之后参数%丢失%】
3.1使用query,&使用Link标签跳转携带参数(刷新页面之后参数丢失)
3.2使用query,&使用JS方式跳转携带参数(刷新页面之后参数丢失)
query 获取参数的方式和上图一致
总结:
- 第一种路由传参,参数在url上边可以直接看到,当时没有在history记录中
- state通常用作普通参数传递(推荐)【在history中】
- query可用作支付或其他安全跳转(推荐)【在history中】