React路由导航

本文介绍了JavaScript路由导航的基本概念,包括路由跳转、声明式导航(通过模板的<Link>组件)和编程式导航(useNavigate钩子),以及如何在跳转时传递参数。
摘要由CSDN通过智能技术生成

1. 什么是路由导航

一个路由跳转到另一个路由,并且在跳转的同时有可能需要传递参数进行通信,比如列表页跳转到详情页携带参数
在这里插入图片描述

2. 声明式导航

声明式导航是指通过在模版中通过 <Link/> 组件描述出要跳转到哪里去,比如后台管理系统的左侧菜单通常使用这种方式进行

在这里插入图片描述
语法说明:通过给组件的to属性指定要跳转到路由path,组件会被渲染为浏览器支持的a链接,如果需要传参直接通过字符串拼接的方式拼接参数即可

3. 编程式导航

编程式导航是指通过 useNavigate 钩子得到导航方法,然后通过调用方法以命令式的形式进行路由跳转,比如想在登录请求完毕之后跳转就可以选择这种方式,更加灵活

在这里插入图片描述
语法说明:通过调用navigate方法传入地址path实现跳转
应用场景:1.按钮跳转,2.js方法跳转

导航传参

在这里插入图片描述
别忘了param传参需要在路由上加上对应的:id

{
    path: '/article/:id/:name',
    element: <Article />
 }```
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值