首页 > 其他分享 >react的基础跳转传参

react的基础跳转传参

时间:2022-11-16 08:55:37浏览次数:34  
标签:传参 axios react json 跳转 路由

小插曲:  

 

获取自定义json数据

 

   可以打开终端  npm  i  axios(下载axios)

 

  • componentDidMount() (相当于挂载完成)这个生命周期里面得到数据,例如:
  • Import  引入想要的名称  from  ‘axios’
  • Name.(‘json路径’).then((res)=>{
  • })

 

 

js中路由跳转

跳转  this.props.history.push(‘路径)

NavLink   Route  Redirect这三个才可以使用exact 精确匹配

 

 

 

 

路由跳转传参

传值的几种方式:

  1. search | hash   有字符限制,如果有中文需要qs
  2. State          无字符限制,但是不能关闭浏览器,如果 路由部分使用的是HashRouter刷新也不可以
  3. 动态路由中的params  传递数据最多1-3个

页面中对象方式传递

 

 

 

 

在另一页面中接收地址栏数据

 

标签:传参,axios,react,json,跳转,路由
From: https://www.cnblogs.com/vvuessss/p/16894715.html

相关文章

  • 面试官:说说React-SSR的原理
    前言所谓同构,简而言之就是,第一次访问后台服务时,后台直接把前端要显示的界面全部返回,而不是像SPA项目只渲染一个<divid="root"></div>剩下的都是靠JavaScript脚本去......
  • 通宵整理的react面试题并附上自己的答案
    什么是ReactFiber?Fiber是React16中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。ReactFiber的目标是提高其在动画、布局、手势、暂停......
  • 面试官:你是怎样进行react组件代码复用的
    mixinMixin设计模式Mixin(混入)是一种通过扩展收集功能的方式,它本质上是将一个对象的属性拷贝到另一个对象上面去,可以拷贝多个属性到一个对象上,为了解决代码复用问题。常......
  • 一天完成react面试准备
    什么是React的refs?为什么它们很重要refs允许你直接访问DOM元素或组件实例。为了使用它们,可以向组件添加个ref属性。如果该属性的值是一个回调函数,它将接受底层的DOM元素......
  • React Suspense API All In One
    ReactSuspenseAPIAllInOneoldConcurrentModehttps://17.reactjs.org/docs/concurrent-mode-intro.htmlhttps://reactjs.org/docs/concurrent-mode-intro.html/......
  • Next.js & React component render twice bug All In One
    Next.js&ReactcomponentrendertwicebugAllInOneerror❌solution✅//next.config.jsmodule.exports={-reactStrictMode:true,+reactStrictMode:......
  • 不用app实现shopify跳转亚马逊
    shopify跳转亚马逊Amazon的方式有很多种,如果不用app实现shopifyredirecttoAmazon呢?安装app一般都会带有附加文件从而降低网站加载速度,而速度是用户体验/转化率很重要的......
  • Vue路由的使用(页面跳转)
    路由不是内部功能所以需要先安装:一定要安装到相关项目中哦cnpminstall--savevue-router 需创建的文件夹及文件:......
  • shopify详情页跳转实现AB站跳转
    shopify详情页跳转如何实现呢?朋友想AB站跳转实现A站的详情页跳转到B站的详情页(a.com/products/test-url/跳转到b.com/product/test-url/,A站是shopify,B站不一定是shopify......
  • 部署apache2并实现ssl自动跳转
    部署apache2并实现ssl自动跳转1.YUM安装我这里为了快速部署直接使用YUM安装[root@ip-172-31-5-103~]#yuminstallhttpd-y2.路径httpd解释/etc/http......