当前位置: 首页 > news >正文

React 路由与组件通信:如何实现路由参数、查询参数、state和上下文的使用

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。

在React中,路由与组件通信通常是通过以下几种方式实现的:

1. 通过路由参数(Params)

当使用React Router(一个常用的React路由库)时,你可以在路由定义中传递参数,然后在组件中通过props来访问这些参数。

// 定义路由,其中:id是路由参数
<Route path="/user/:id" component={UserComponent}/>
// 在UserComponent组件中访问参数
const UserComponent = ({ match }) => {const { id } = match.params;return <div>User ID: {id}</div>;
};

2. 通过查询参数(Query)

查询参数可以通过location.search属性访问,但你可能需要解析这个字符串来获取实际的参数值。

// 在路由中不需要特别定义查询参数
<Route path="/search" component={SearchComponent}/>
// 在SearchComponent组件中解析查询参数
import { useLocation } from 'react-router-dom';
const SearchComponent = () => {const location = useLocation();const query = new URLSearchParams(location.search);const searchTerm = query.get('query');return <div>Search Term: {searchTerm}</div>;
};

3. 通过state

你可以在导航到一个路由时传递额外的state,然后在目标组件中通过location.state来访问这个state。

// 使用Link或useHistory钩子进行导航,并传递state
<Link to={{ pathname: "/user", state: { fromDashboard: true } }}>User</Link>
// 在UserComponent组件中访问state
const UserComponent = ({ location }) => {const { fromDashboard } = location.state || {};return <div>From Dashboard: {fromDashboard ? 'Yes' : 'No'}</div>;
};

4. 使用上下文(Context)

React的上下文API允许你跨组件传递数据,而无需一层层地手动传递props。

// 创建一个上下文
const UserContext = React.createContext();
// 在路由组件中使用Provider包裹子组件,并传递值
<Route path="/user" render={() => (<UserContext.Provider value={{ userId: '123' }}><UserComponent/></UserContext.Provider>
)}/>
// 在UserComponent组件中消费上下文
const UserComponent = () => {const { userId } = useContext(UserContext);return <div>User ID: {userId}</div>;
};

5. 使用Redux或MobX等状态管理库

如果你在应用中使用了状态管理库,你可以将路由信息或组件数据存储在全局状态中,然后在任何组件中访问。

// 在路由变化时更新Redux状态
const mapStateToProps = state => ({userId: state.routing.userId
});
const UserComponent = ({ userId }) => {return <div>User ID: {userId}</div>;
};
export default connect(mapStateToProps)(UserComponent);

这些方法可以根据应用的具体需求和结构灵活选择。React Router提供的useParamsuseLocationuseHistory等钩子,以及React的上下文API,为组件与路由之间的通信提供了便利。

http://www.lryc.cn/news/496590.html

相关文章:

  • 帮我写一篇关于AI搜索网页上编写的文章是否存在版权问题的文章, 字数在 3000 字左右。文心一言提问, 记录后用.
  • 电脑关机的趣味小游戏——system函数、strcmp函数、goto语句的使用
  • AttributeError: ‘DataFrame‘ object has no attribute ‘append‘的参考解决方法
  • java垃圾回收机制介绍
  • SpringMVC跨域问题解决方案
  • 【语音识别】Zipformer
  • vue+uniapp+echarts的使用(H5环境下echarts)
  • 【Python网络爬虫笔记】7-网络爬虫的搜索工具re模块
  • 为什么选择 React Native 作为跨端方案
  • 服务器与普通电脑有什么区别?
  • Oracle 12c Data Guard 环境中的 GAP 修复方法
  • 力扣 三角dp
  • SQL基础语法全解析(上篇)
  • 【笔记】Linux服务器端使用百度网盘
  • UEFI Spec 学习笔记---3 - Boot Manager(3)
  • ATTCK红队评估实战靶场(四)
  • Android Studio 历史版本下载
  • 微信小程序px和rpx单位互转方法
  • Vercel 部署与管理指南:简化前端应用的自动化部署流程
  • Java11使用JVM同一日志框架启用日志记录
  • onlyoffice实现文档比对(Beta版)-纯文字比对(非OCR)
  • JS querySelector方法的优点
  • 利用获取商品详情API:item_get可以获取到淘宝商品详情的哪些数据?
  • 【大数据学习 | 面经】Spark 3.x 中的AQE(自适应查询执行)
  • [Vue]Vue-router
  • 【HarmonyOS】鸿蒙应用使用lottie动画
  • 1.使用docker 部署redis Cluster模式 集群3主3从
  • vue基础之8:computed对比watch
  • Luban数据插件的用法
  • 指针(上)