React-函数式组件路由传参

最新推荐文章于 2024-04-01 10:14:49 发布
最新推荐文章于 2024-04-01 10:14:49 发布
阅读量387 收藏 5
点赞数
分类专栏： React的世界 文章标签： react.js 前端 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yxlyttyxlytt/article/details/130776699
版权

params传参

父组件News，父组件传参的格式需要和下面格式保持一致

子组件Item接收参数，需要使用useParams解构传过来的参数，当然使用useMatch也可以，不过过于繁杂，不推荐使用 

路由表里对于item的组件也需要进行修改 

search传参

父组件News，父组件传参的格式需要和下面格式保持一致

 

子组件Item接收参数，需要使用useSearchParams解构两个参数，第一个参数用于获取父传过来的值，第二个参数可对传过来的值进行修改

同时我们也可以通过useLocation查看路由相关数据

 

state穿参

父组件News，父组件传参的格式需要和下面格式保持一致

 

子组件item需要使用useLocation连续结构传过来的参数 

编程式路由导航穿参

父组件News

使用useNavigate进行编程式路由导航传参

replace属性默认为false，可以回退到上一个路由

注意按钮点击必须调用函数，不能直接调用一个方法

 

使用useNavigate可以实现页面的前进和后退 

零凌林
关注
专栏目录
【React】路由组件传参（三种方案params、search、state）
Coding and studying
07-12 5799
示例： 示例重点在于：Message组件本身是一个路由组件，其又是Detail组件的父组件，在Message组件中注册Detail子组件，点击导航栏对应链接，将对应的message消息内容传递给子路由组件Detail。然后Detail接收到父路由组件Message传递的params参数，将内容显示在页面对应位置中。接下来展示Message与Detail组件源码： Message组件源码： Detail组件源码： Home组件源码： 路由组件传参——params总结：上面我们学会了向路由组件传递params
【React Router v6】路由组件传参params/search/state(router v6)
Coding and studying
08-14 2610
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架。
React（函数组件）父组件和子组件之间的传值
热门推荐
weixin_44741164的博客
04-15 1万+
react父组件和子组件之间传值
React - 路由组件传参
技术共享，共同进步！
09-05 424
React - 路由组件传参
详解react如何在组件中获取路由参数
08-30
主要介绍了详解react如何在组件中获取路由参数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
react 组件 传参
qq_61896295的博客
08-19 943
/导入组件 import Steper form 'src/components/Steper.js' //使用 App.js中 < Steper > < / Steper > //组件名称的首字母必须大写。
react-native路由跳转传参和参数的获取
九段刀客的博客
11-29 238
react
react-router-dom v6 的嵌套路由和路由参数传递
m0_50163856的博客
02-07 1346
安装 npm install react-router-dom 修改index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import {BrowserRouter} from 'react-router-dom' ReactDOM.render( <React.StrictMode> <BrowserRouter>..
React基础入门(路由传参,NavLink,redux) --第三篇
Bioye_的博客
07-30 1113
NavLink的介绍 他可以实现路由的高亮,NavLink比Link高级一点,他自身有一个属性点击哪个路由就会自动给点击的那个路由添加一个类名为active的属性,如果不喜欢这个样式,也可自行用activeClassName给他添加一个自定义的类名,注意:这里如果使用bootStrop的情况,因为普通的类权重低,所以样式会被bootstarp覆盖,这里加上! important就ok了. <NavLink activeClassName="atdh" to="/Home">home跳转</
react 的 路由传参
weixin_45615650的博客
05-19 8570
1、路由传参 1、动态路由传参 使用prop进行接收 props.match.params.参数名 2、query传参 this.props.history.push({ pathname: ‘路由’, query:{参数名：参数值} }) 接收: this.props.location.query.参数名 3、state传参 this.props.history.push({ pathname: ‘路由’, state:{参数名：参数值} }) 接收: this.props.location.state
React组件参数传递
qq_44718039的博客
06-06 318
React父子组件的参数传递
react中组件通信---函数式组件父子组件传参和props验证
最新发布
zn843998601的博客
04-01 1274
在React中，常用的组件通信方式有以下几种：1. 父组件向子组件通信：可以通过props方式传递数据；也可以通过 ref 方式传递数据；2. 子组件向父组件通信：子组件通过回调函数向父组件传递数据，父组件可以在回调函数中处理接收到的数据；3. 兄弟组件通信：如果两个兄弟组件没有直接的父子关系，可以通过将它们的共同状态提升到它们的最近共同父组件中，然后通过props将数据传递给兄弟组件。
react中向路由组件传递参数的三种方式
m0_63135041的博客
04-24 1394
react中向路由组件传递参数的三种方式
React几种传递参数的方法
qq_44980680的博客
11-20 2863
React几种传递参数的方法
React.js学习（十）、路由传参
黄孝果的博客
02-26 385
一、向路由组件传递params参数 render() { const {messageArr} = this.state return ( <div> <ul> { messageArr.map((msgObj)=>{ return (
2.React框架之函数组件路由及参数传递React-Router（V6）
qq_44438941的博客
02-13 1574
react函数式组件之路由与参数传递
React获取router路由路径里的相关信息
qq_41547882的博客
04-15 1万+
路由：'financial-budget/:id/edit' 路径：http://localhost:3000/financial-budget/4028963b7ce8b541017ce90bed9400ca/edit （1）用 useParams() 获取参数： import { useParams } from 'react-router-dom'; const { id } = useParams(); console.log(useParams()); ======> usePar
react函数式组件父子组件之间传参
weixin_49662044的博客
12-28 3349
react函数式组件父子组件之间传参
react-router-dom路由传参及获取方法
05-30
React Router Dom 提供了多种传递参数的方式，以下是其中几种常用的方法： 1. Query Parameters 通过 URL 上的查询参数传递参数，例如：`/user?id=123&name=John`。在组件中可以通过 `props.location.search` 来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

零凌林

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值