首页 > 其他分享 >react中路由传参和url传参

react中路由传参和url传参

时间:2024-04-07 16:47:55浏览次数:13  
标签:传参 const url react useParams id store

一、如果路由跳转的页面是必须要一个参数的,那么可以在路由配置文件中的path中添加要传递参数的参数名。

path: 'account-info/:id'

接受参数的时候使用react-router-dom中的useParams函数就可以了。

const { id } = useParams()

二、如果需要跳转的页面可以有参数也可以没有,使用这个方法就会造成歧义,使用useParams取值会取成:id。

可以换成下面这种方法

navigate(`/merchant?store_id=${data.data.store.store_id}`)   //存值
const location = useLocation()
const searchParams = new URLSearchParams(location.search)
const store_id = searchParams.get('store_id')     //取值

 

标签:传参,const,url,react,useParams,id,store
From: https://www.cnblogs.com/panglinglong/p/18119355

相关文章

  • React 学习之 Hello World
    React学习之HelloWorldReact简介React是一个用于构建用户界面的JavaScript库,由Facebook开发并维护。React通过声明式的方式来构建UI,使得代码更易于理解和测试。React的核心概念包括组件(Component)和虚拟DOM(VirtualDOM)。组件:在React中,UI被构建为组件的集合。组件是封装了HTM......
  • Java登陆第三十九天——Router编程式路由,路由传参
    在上一章节,<router-linkto="/left">左</router-link>这种这种路由,to中的内容目前是固定的。被称之为声明式路由(或普通路由)编程式路由编程式路由,可以按需决定某组件的路径映射。vue-router提供了一个函数:useRouter语法格式如下://该函数的返回值是一个路由对象。letrout......
  • 猫头虎分享已解决Bug || **URLError (URL错误)** 全方位解析
    博主猫头虎的技术世界......
  • vue3的ref和reactive函数
    在vue3中需要引入ref和reactive函数对变量进行声明 首先引入ref,reactive函数,vue3不同于vue2的是,变量的声明需要写在setup函数中,(vue2是直接写在data函数中)其中ref主要是对一些基础数据变量声明,如string,number,boolean,而reactive则是对复杂的,入对象进行声明最后,定义......
  • php安全之curl函数
    cURL是一个用于进行各种网络请求的强大工具,但如果未正确验证和限制用户提供的URL,它也可能被用于发起SSRF攻击curl_close()关闭一个cURL会话。curl_copy_handle()复制一个cURL句柄和它的所有选项。curl_errno()返回最后一次的错误号。curl_error()返回一个保护当前会话最近一次......
  • Java登陆第三十八天——VUE3生命周期、钩子函数、组件拼接、组件传参(组件通信)
    生命周期之前在Servlet等也学习过生命周期,相同的,VUE组件也有生命周期。VUE组件完全解析到浏览器,会经过如下过程。(简单理解)vue组件被实例化的过程,称为,组件实例化。组件实例解析到浏览器中,称为,挂载。组件实例从浏览器中删除,称为,卸载。钩子函数vue组件解析到浏览器的......
  • React19 新特性 – 附带代码示例的更新
    ReactJS是前端开发世界中最流行的UI库之一。我喜欢React的原因之一就是它背后的团队以及社区对它的热情。当社区提出对新功能和改进的需求时,团队会倾听。React的未来令人兴奋而有趣。如果我必须用一句话来总结,我会说这几乎概括了一切:“少写代码,多实现功能。”在本......
  • 开发一个react组件包的时候,组件包里的路径是不是最好使用相对路径../不建议使用别名@
    在开发React组件包时,关于路径的选择,是否使用相对路径(如../)或路径别名(如@),取决于具体项目需求、团队规范以及个人偏好。两者都有其适用场景和优缺点,下面分别进行讨论:使用相对路径(如../):优点:通用性:相对路径直接基于文件系统结构,无需额外配置即可被大多数开发环境和构建工具理......
  • Radium 行内样式在 React18 中不生效
    问题React17升级到18之后,行内样式借助Radium包实现hover和媒体查询,无法生效。npmiradium-S下载Radium依赖包App.jsimportRadiumfrom'radium'conststyleObj={width:100,height:100,backgroundColor:'#FAE',':hover':{backgro......
  • webpack 搭建 react
    前言除了用react官方脚手架搭建react项目,也可用webpack搭建。记录npmiwebpackwebpack-cli-D报错解决:右键以管理员身份打开vscode,再打开文件夹。gitadd./显示Thefilewillhaveitsoriginallineendingsinyourworkingdirectory解决:gitconfig--glo......