react中路由跳转以及路由传参

一、路由跳转

1.安装插件

npm install react-router-dom

2.路由配置

路由配置:react中简单的配置路由-CSDN博客

3.实现代码

// src/page/index/index.js// 引入
import { Link, useNavigate } from "react-router-dom";function IndexPage() {const navigate = useNavigate()return (<div>欢迎来到index{/* 声明式是导航 */}<div><Link to="/login">跳转到login</Link></div>{/* 编程式导航 */}<div><button onClick={() => navigate('/login')}>跳转到login</button></div></div>);
}export default IndexPage;

4.效果

跳转前

跳转后

5.说明

声明式导航:会当做<a />使用,因此会出现a标签的样式,一般用于菜单这样不需要调用方法,直接点击就跳转这样的时候;

编程式导航:一般用于需要触发方法做一些逻辑操作后再跳转的场景

二、路由传参

说明:传参方式有两种,获取参数方式对应也是两种;这里两种传参方式同时编写,注释的是searchParams方式传参,没注释的是params方式传参

1.安装插件

npm install react-router-dom

2.路由配置

src/router/index.js

// 1.引入方法,用于创建路由实例
import { createBrowserRouter } from 'react-router-dom' // 2.引入组件
import LoginPage from '../page/login';
import IndexPage from '../page/index';// 3.创建router实例,配置路由
const router = createBrowserRouter([ {// path:"/login", // searchParams方式传参path:"/login/:id/:name", // params方式传参element:<LoginPage></LoginPage> // 渲染页面的地方},{path:"/index",element:<IndexPage></IndexPage>},{path:"",element:<div>欢迎来到首页</div>}
])// 4.暴露路由实例,用于在App.js主入口组件
export default router;

3.实现代码

src/page/index/index.js

// src/page/index/index.js// 引入
import { Link, useNavigate } from "react-router-dom";function IndexPage() {const navigate = useNavigate()return (<div>欢迎来到index{/* 声明式是导航 */}<div>{/* searchParams方式传参 */}{/* <Link to="/login?id=1&name=一之濑帆波">跳转到login</Link> */}{/* params方式传参 */}<Link to="/login/1/一之濑帆波">跳转到login</Link></div>{/* 编程式导航 */}<div>{/* searchParams方式传参 */}{/* <button onClick={() => navigate('/login?id=1&name=一之濑帆波')}>跳转到login</button> */}{/* params方式传参 */}<button onClick={() => navigate('/login/1/一之濑帆波')}>跳转到login</button></div></div>);
}export default IndexPage;

src/page/login/index.js

import { useSearchParams,useParams } from "react-router-dom";function LoginPage() {// searchParams方式传参// const [params] = useSearchParams();// const name = params.get('name'); // 通过get方法来获取数据// const id = params.get('id'); // // 通过get方法来获取数据// params方式传参const params = useParams();const name = params.name;const id = params.id;return (<div>{name} 欢迎来到login-{id}</div>);
}export default LoginPage;

src/App.js

import React, { useState, useRef, useEffect, useContext, createContext } from 'react';
// 1.引入
import { RouterProvider } from 'react-router-dom'
import router from './router';function App() {return (<div>{/* 2.绑定 */}<RouterProvider router={router}></RouterProvider></div>);
}export default App;

4.最终效果

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

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

相关文章

【MR】现代机器人学-算法库函数解析(C++版截止2024.4.7)

算法库提供以下函数的实现 NearZero: 判断一个值是否可以忽略为0。ad: 计算给定6维向量的6x6矩阵[adV]。Normalize: 返回输入向量的归一化版本。VecToso3: 返回角速度向量的反对称矩阵表示。so3ToVec: 返回由反对称矩阵表示的角速度向量。AxisAng3: 将指数旋转转换为其单独的分…

CSS常见属性详解——内边距与外边距

内边距与外边距 内边距 外边距 应用场景 在网页排版布局时&#xff0c;我们经常会希望元素与元素之间有一定的间距&#xff0c;此时我们可能会用到CSS的外边距或内边距属性&#xff0c;这两个属性都能让元素之间产生距离&#xff0c;那么他们之间有什么不同呢&#xff1f; …

Nginx系列-10 realIp模块使用

背景 Nginx对每个模块都有说明文档&#xff0c;可参考:https://nginx.org/en/docs/ 当请求被代理后&#xff0c;真实客户端相对服务器被隐藏&#xff0c;即服务端无法判断HTTP消息来源。 如上图所示&#xff0c;IP分别为100.100.100.1和100.100.100.2的两个客户端向服务器200.…

centos7安装es及简单使用

为了方便日后查看&#xff0c;简单记录下&#xff01; 【启动es前,需要调整这个配置文件(/opt/elasticsearch-6.3.0/config/elasticsearch.yml)的两处ip地址,同时访问页面地址的ip:9200时,ip地址也对应修改】 【启动kibana前,需要调整这个配置文件(/opt/kibana-6.3.0/config/k…

java面试题 Spring部分(二)

1.Spring Boot的生命周期 典型回答 一个Spring的Bean从出生到销毁的全过程就是他的整个生命周期&#xff0c;经历以下的几个阶段&#xff1a; 整个生命周期可以大致分为3个大的阶段&#xff0c;分别是&#xff1a;创建、使用、销毁。还可以进一步分为5个小阶段&#xff1a;实…

08 字符串和字节串

使用单引号、双引号、三单引号、三双引号作为定界符&#xff08;delimiter&#xff09;来表示字符串&#xff0c;并且不同的定界符之间可以相互嵌套。 很多内置函数和标准库对象也都支持对字符串的操作。 x hello world y Python is a great language z Tom said, "Le…

centos7 mysql 基本测试(6)主从简单测试

centos7 xtrabackup mysql 基本测试&#xff08;6&#xff09;主从简单测试 mysql -u etc -p 1234aA~1 参考&#xff1a; centos7 时区设置 时间同步 https://blog.csdn.net/wowocpp/article/details/135931129 Mysql数据库&#xff1a;主从复制与读写分离 https://blog.csd…

HTML常见标签——超链接a标签

一、a标签简介 二、a标签属性 href属性 target属性 三、a标签的作用 利用a标签进行页面跳转 利用a标签返回页面顶部以及跳转页面指定区域 利用a标签实现文件下载 一、a标签简介 <a>标签用于做跳转、导航&#xff0c;是双标签&#xff0c;记作<a></a>&#…

移动式气象站:科技赋能,精准预报的新篇章

在这个气候多变、极端天气频发的时代&#xff0c;气象信息的准确性与及时性成为了社会各界关注的焦点。从农业生产到城市规划&#xff0c;从航空航海到日常生活&#xff0c;气象服务无处不在&#xff0c;其重要性不言而喻。而在这场气象科技的变革中&#xff0c;移动式气象站以…

linux对齐TOF和RGB摄像头画面

问题&#xff1a;TOF和RGB画面不对齐 linux同时接入TOF和RGB&#xff0c;两者出图时间是由驱动层控制&#xff08;RGB硬件触发出图&#xff09;&#xff0c;应用层只负责读取数据。 现在两者画面不对齐&#xff0c;发现是开始的时候两者出图数量不一致导致的。底层解决不了&a…

数据结构(Java):Map集合Set集合哈希表

目录 1、介绍 1.1 Map和Set 1.2 模型 2、Map集合 2.1 Map集合说明 2.2 Map.Entry<K&#xff0c;V> 2.3 Map常用方法 2.4 Map注意事项及实现类 3、Set集合 3.1 Set集合说明 3.2 Set常用方法 3.3 Set注意事项及其实现类 4、TreeMap&TreeSet 4.1 集合类TreeM…

「AI绘画Stable Diffusion 零基础入门 」AI 绘画SD原理与工具介绍,万字详解新手入门必看!

大家好&#xff0c;我是设计师阿威 AI 绘画原理 想要入门 AI 绘画&#xff0c;首先需要了解它的原理是什么样的。 其实很早就已经有人基于深度学习模型展开了对图像生成的研究了&#xff0c;但在那时&#xff0c;生成的图像分辨率和内容都非常抽象。 直到近两年&#xff0c…

【数据结构-前缀和】力扣3152.特殊数组II

如果数组的每一对相邻元素都是两个奇偶性不同的数字&#xff0c;则该数组被认为是一个 特殊数组 。 周洋哥有一个整数数组 nums 和一个二维整数矩阵 queries&#xff0c;对于 queries[i] [fromi, toi]&#xff0c;请你帮助周洋哥检查子数组 nums[fromi…toi] 是不是一个 特殊…

测试面试宝典(二十九)—— 如何对一个页面进行测试

对一个页面进行测试&#xff0c;通常可以遵循以下步骤和方法&#xff1a; 首先&#xff0c;进行页面的功能测试。检查页面上的所有元素&#xff0c;如按钮、链接、输入框、下拉菜单等是否能正常工作。比如点击按钮是否能触发预期的操作&#xff0c;链接能否正确跳转&#xff0…

Spring从入门到精通 01

文章目录 1. 依赖注入 (Dependency Injection, DI)2. 面向切面编程 (Aspect-Oriented Programming, AOP)3. 事务管理4. 简化 JDBC 开发5. 集成各种框架和技术6. 模块化和扩展性&#xff1a;主要的 Spring 模块&#xff1a;Core Container&#xff1a;AOP 模块&#xff1a;Data …

VLAN通讯实验

目录 拓扑图 需求 需求分析 配置过程 1、手工配置 2、 使用DHCP获得IP地址信息 3、测试全网是否可达 拓扑图 需求 1、PC1、PC3属于VLAN 2 2、PC2、PC4属于VLAN 3 3、通过DHCP使得PC获取IP地址信息 4、全网可达 需求分析 1、先手工配置网段&#xff0c;VLAN 2为192.168.1…

数据结构经典测试题4

1. #include <stdio.h> int main() { char *str[3] {"stra", "strb", "strc"}; char *p str[0]; int i 0; while(i < 3) { printf("%s ",p); i; } return 0; }上述代码运行结果是什么&#xff1f; A: stra strb strc B: s…

【用最少数量的箭引爆气球】python刷题记录

R2-贪心篇. 求最小&#xff0c;那就尽可能地假设更多的气球y值不相同咯。 不对&#xff0c;气球除了y值我们随便摆&#xff0c;所以找尽可能多重叠的&#xff0c;就作为同一只箭。 class Solution:def findMinArrowShots(self, points: List[List[int]]) -> int:#贪心策略…

原生PHP/JS自主开发的交友内核框架婚恋交友系统V10

本文来自&#xff1a;婚恋交友系统V10 - 源码1688 应用介绍 原生PHP/JS自主开发的交友内核框架&#xff0c;极高性能、无捆绑、自主权、无流水扣点、独立全开源 01脱单盲盒&#xff1a;脱单盲盒类似于漂流瓶&#xff0c;先将自己《投放》到盲盒中&#xff0c;另一伴有缘将您取…

Spring简单代码

Spring代码 导入坐标 <dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.2.10.RELEASE</version></dependency><dependency><groupId&g…