React路由导航

1. 什么是路由导航

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

2. 声明式导航

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

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

3. 编程式导航

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

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

导航传参

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

{path: '/article/:id/:name',element: <Article />}```

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/660362.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

找不到msvcr120.dll怎么办,msvcr120.dll丢失的5种修复方法分享

计算机系统在运行某应用程序时无法正常启动&#xff0c;具体表现为缺少了一个至关重要的动态链接库文件——msvcr120.dll。这个DLL文件是微软Visual C Redistributable Package的一部分&#xff0c;对于确保许多基于Windows平台的软件能够顺利运作起着不可或缺的作用。msvcr120…

远程桌面连接服务器怎样连接不上的六个常见原因

远程桌面连接服务器无法连接的问题可能由多种原因引起。以下是一些常见的问题及其解决方案&#xff1a; 1. 网络连接问题&#xff1a;远程桌面连接的基础是稳定的网络连接。如果网络连接不稳定或中断&#xff0c;那么你将无法连接到远程桌面。检查你的网络连接&#xff0c;确保…

跨平台桌面客户端开发框架

跨平台桌面客户端开发框架允许开发者创建能够在多个操作系统上运行的桌面应用程序。以下是一些流行的跨平台桌面客户端开发框架。这些框架各有优势&#xff0c;选择哪个框架取决于项目需求、团队的技术栈以及对特定特性的偏好。 1.Electron &#xff1a; 使用JavaScript, HTML…

【刷题篇】动态规划-完全背包问题(十一)

文章目录 1、完全背包2、零钱兑换3、零钱兑换 II4、完全平方数 1、完全背包 #include <iostream> #include<vector> using namespace std;int main() {int n,v;cin>>n>>v;vector<int> V(n1);vector<int> W(n1);for(int i1;i<n;i){cin&g…

OMG 一个方法的调用改动居然优化了一倍性能!!! ConcurrentHashMap.computeIfAbsent 学习

背景 前提&#xff1a;抖音小程序有qps的监控&#xff0c;如果说qps过低就会导致小程序被下架掉。 业务代码非常的简单 一个easy的查询 但是当并非达到 20就 会发现qps降低了10倍 业务需求实现大概这么一个链路 ok 那么此前我们在认识一下 computeIfAbsent 方法&#xff08;大…

Spring6 当中 Bean 的生命周期的详细解析:有五步,有七步,有十步

1. Spring6 当中 Bean 的生命周期的详细解析&#xff1a;有五步&#xff0c;有七步&#xff0c;有十步 文章目录 1. Spring6 当中 Bean 的生命周期的详细解析&#xff1a;有五步&#xff0c;有七步&#xff0c;有十步每博一文案1.1 什么是 Bean 的生命周期1.2 Bean 的生命周期 …

AWTK 集成 OGRE 3D 图形引擎

本项目演示了如何在 AWTK 中集成 OGRE3D。 0. 准备 先编译 AWTK, 并在 env.sh 中设置 awtk 的路径。需要安装 cmake 1. 生成资源 python scripts/update_res.py all2. 编译 设置环境变量 source env.sh source env_rt.sh编译 ogre 库 cd 3rd build_assimp.sh build_ogre.…

环形链表题

1.环形链表1 看题&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 思路1&#xff1a;哈希表 遍历所有节点&#xff0c;每次遍历一个节点时&#xff0c;判断该节点是否被访问过。 可以使用哈希表来存储所有已经访问过的节点。每次到达一个节点&#xff0c;如果该节点已…

win10安装DHCP服务--用于2台机器之间搭建简易网络来进入目标机器修改配置

前言&#xff1a; 客户多了&#xff0c;往往会出现各种突发情况。 比如一个客户现场没有DHCP&#xff0c;没有显示器&#xff0c;键盘。 你只有一台笔记本的情况下要配置目标机器的网络。要如何配置&#xff1f;&#xff1f; 这时候就可以使用这篇博客提供的方式了。 Windows…

http1.1和http2.0的同源请求数限制

判断协议版本 :scheme: 在请求头中表示使用的是HTTP/2协议。即 出现 :开头的请求头Chrome 只支持查看 HTTP/1.x 的 Raw Headers&#xff0c;对这种请求&#xff0c;会给出 view source 选项。HTTP2.0不给出。可继续学习 https://www.cnblogs.com/kirito-c/p/10360868.html抓包…

update_min_vruntime()流程图

linux kernel scheduler cfs的update_min_vruntime() 看起来还挺绕的。含义其实也简单&#xff0c;总一句话&#xff0c;将 cfs_rq->min_vruntime 设置为&#xff1a; max( cfs_rq->vruntime, min(leftmost_se->vruntime, cfs_rq->curr->vruntime) )。 画个流…

沐风老师3DMAX一键生成桌子插件TableMaker使用方法

3DMAX一键生成桌子插件TableMaker使用教程 3DMAX一键生成桌子插件TableMaker&#xff0c;参数化方式快速创建各种样式桌子模型。 【适用版本】 3dMax2011-2025&#xff08;不仅限于此范围&#xff09; 【安装方法】 3DMAX一键生成桌子插件无需安装&#xff0c;使用时直接拖动…