react函数式组件中的路由传参方式

news2024/11/26 19:07:42

React Router 提供了多种方式来传递路由参数:

  1. URL 路径参数:通过动态路由和 useParams 获取。
  2. 查询参数:通过 useLocation 获取 URL 查询字符串。
  3. 路由状态传递:通过 state 属性在导航时传递数据,不在 URL 中显示,使用 useLocation 获取。
  4. React Router v6 Navigate 和 useNavigate:用于程序性导航并传递状态。

路由传参。React Router 提供了多种方式来传递和获取路由参数。以下是几种常见的方式:

1. URL 路径参数 (Path Parameters)

当你在 URL 路径中使用动态部分时,可以通过 React Router 的 useParams hook 来访问这些参数。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/user/:id" component={User} />  //路由配置文件中的写法同理
      </Switch>
    </Router>
  );
}

import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();  // 获取 URL 中的动态参数 id
  return <div>User ID: {id}</div>;
}

2. 查询参数 (Query Parameters)

可以在 URL 中通过查询字符串传递参数,使用 useLocation hook 来访问查询参数。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/search?query=react&sort=asc" component={SearchResults} />
      </Switch>
    </Router>
  );
}

import { useLocation } from 'react-router-dom';

function SearchResults() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const query = queryParams.get('query');  // 获取 query 参数
  const sort = queryParams.get('sort');    // 获取 sort 参数

  return (
    <div>
      <p>Query: {query}</p>
      <p>Sort: {sort}</p>
    </div>
  );
}

3. 传递状态 (State via Navigation)

React Router 提供了通过 history.pushLink 传递状态的方式,这种方式的参数不会显示在 URL 中。

import { Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <Link
        to={{
          pathname: "/about",
          state: { fromHome: true }
        }}
      >
        Go to About
      </Link>
    </div>
  );
}

import { useLocation } from 'react-router-dom';

function About() {
  const location = useLocation();
  const fromHome = location.state?.fromHome;

  return <div>{fromHome ? 'Visited from Home' : 'Not from Home'}</div>;
}

4. 传递参数使用 Navigate (React Router v6)

在 React Router v6 中,Navigate 组件用于程序性导航,并且可以携带状态

import { Navigate } from 'react-router-dom';

function Home() {
  return <Navigate to="/about" state={{ fromHome: true }} />;
}

import { useLocation } from 'react-router-dom';

function About() {
  const location = useLocation();
  const fromHome = location.state?.fromHome;

  return <div>{fromHome ? 'Visited from Home' : 'Not from Home'}</div>;
}
 

5. 传递参数通过 useNavigate(React Router v6)
 

import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  const goToAbout = () => {
    navigate('/about', { state: { fromHome: true } });
  };

  return <button onClick={goToAbout}>Go to About</button>;
}
 

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

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

相关文章

ubuntu24挂载硬盘记录

1、显示硬盘及所属分区情况。在终端窗口中输入如下命令&#xff1a; sudo fdisk -l 找到自己硬盘的分区 我的地址/dev/sda 2、显示硬盘及所属分区情况。在终端窗口中输入如下命令&#xff0c;格式化自己硬盘&#xff1a; sudo mkfs -t ext4 /dev/sda 3、在终端窗口中输入如下…

函数类型注释和Union联合类型注释

函数类型注释格式&#xff08;调用时提示输入参数的类型&#xff09;: )def 函数名(形参名:类型&#xff0c;形参名:类型&#xff09;->函数返回值类型: 函数体 Union联合类型注释&#xff08;可注释多种类型混合的变量&#xff09;格式: #先导入模块 from typing import…

【Python】分割秘籍!掌握split()方法,让你的字符串处理轻松无敌!

在Python开发中&#xff0c;字符串处理是最常见也是最基础的任务之一。而在众多字符串操作方法中&#xff0c;split()函数无疑是最为重要和常用的一个。无论你是Python新手&#xff0c;还是经验丰富的开发者&#xff0c;深入理解并熟练运用split()方法&#xff0c;都将大大提升…

DICOM图像深入解析:为何部分DR/CR图像默认显示为反色?

概述 在数字医学影像处理中,CR(Computed Radiography,计算机放射摄影)和DR(Digital Radiography,数字放射摄影)技术广泛应用于医疗影像获取与分析。然而,临床实践中常常遇到这样一个问题:部分CR/DR图像在默认打开时呈现为反色(即负片效果),需手动反色后才能正常阅片…

正则表达式灾难:重新认识“KISS原则”的意义

RSS Feed 文章标题整理 微积分在生活中的应用与思维启发 捕鹿到瞬时速度的趣味探索 微积分是一扇通往更广阔世界的门&#xff0c;从生活中学习思维的工具。 数据库才是最强架构 你还在被“复杂架构”误导吗&#xff1f; 把业务逻辑写入数据库&#xff0c;重新定义简单与效率。…

详解 【AVL树】

AVL树实现 1. AVL的概念AVL树的实现2.1 AVL树的结点结构2.2 AVL树的插入2.2.1 AVL树的插入的一个大概操作&#xff1a;2.2.2 AVL树的平衡因子更新2.2.3 平衡因子的停止条件2.2.4 再不考虑旋转的角度上实现AVL树的插入 2.3 旋转2.3.1 旋转的原则2.3.2 右单旋2.2.3 右单旋代码实现…

go语言range的高级用法-使用range来接收通道里面的数据

在 Go 语言中&#xff0c;可以使用 for ... range 循环来遍历通道&#xff08;channel&#xff09;。for ... range 循环会一直从通道中接收值&#xff0c;直到通道关闭并且所有值都被接收完毕。 使用 for ... range 遍历通道 示例代码 下面是一个使用 for ... range 遍历通…

计算机网络 | 7.网络安全

1.网络安全问题概述 &#xff08;1&#xff09;计算机网络面临的安全性威胁 <1>计算机网络面临的完全性威胁 计算机网络面临的两大类安全威胁&#xff1a;被动攻击和主动攻击 被动攻击 截获&#xff1a;从网络上窃听他人的通信内容。主动攻击 篡改&#xff1a;故意篡改…

Unity——使用Unity制作BIM全景视频、图片

一、说明&#xff1a; 最近在研究使用threejs加载全景视频视图BIM视图的联动对比&#xff0c;需要制作BIM模型场景下测试用的全景视频demo。 二、生成方法 全景视频的可以使用全景相机拍摄&#xff0c;也可以使用三维引擎渲染生成。 BIM建模引擎Revit中可以使用渲染插件生成…

echarts4r 教程2:Advanced

❝ 写在前面 本文为 R 语言 echarts4r 包的学习笔记。本着自己学习、分享他人的态度&#xff0c;分享学习笔记&#xff0c;希望能对大家有所帮助。软件可能随时更新&#xff0c;建议配合官方文档一起阅读。推荐先按顺序阅读往期内容&#xff1a; 1. echarts4r 教程1&#xff1a…

JSON 性能测试 - WastJson 性能也很快

WAST 是一个高性能 Java 工具集库包&#xff0c;包括 JSON、YAML、CSV、HttpClient、JDBC 和 EL 引擎. WastJson 无论是小中大文本各种数据类型等性能都没有明显的短板&#xff0c;除了推广外可以说是六边形战士&#xff0c;更多测试参考 wast-jmh-test: wast性能测试 (并非所…

DICOM图像处理:深入解析DICOM彩色图像中的Planar配置及其对像素数据解析处理的实现

引言 在DICOM(Digital Imaging and Communications in Medicine)标准中,彩色图像的存储与显示涉及多个关键属性,其中**Planar Configuration(平面配置)**属性(标签 (0028,0006))尤为重要。当遇到彩色DICOM图像在浏览时被错误地分割为9张小图,而实际应显示为一…

django authentication 登录注册

文章目录 前言一、django配置二、后端实现1.新建app2.编写view3.配置路由 三、前端编写1、index.html2、register.html3、 login.html 总结 前言 之前&#xff0c;写了django制作简易登录系统&#xff0c;这次利用django内置的authentication功能实现注册、登录 提示&#xff…

数字图像处理(4):FPGA中的定点数、浮点数

&#xff08;1&#xff09;定点数&#xff1a;小数点固定在数据的某一位置的数&#xff0c;可以分为定点整数和定点小数和普通定点数。定点数广泛应用于数字图像处理&#xff08;图像滤波、图像缩放&#xff09;和数字信号处理&#xff08;如FFT、定点卷积&#xff09;中。 定…

uniapp接入高德地图

下面代码兼容安卓APP和H5 高德地图官网&#xff1a;我的应用 | 高德控制台 &#xff0c;绑定服务选择《Web端(JS API)》 /utils/map.js 需要设置你自己的key和安全密钥 export function myAMap() {return new Promise(function(resolve, reject) {if (typeof window.onLoadM…

三种蓝牙架构实现方案

一、蓝牙架构方案 1、hostcontroller双芯片标准架构 手机里面包含很多SoC或者模块&#xff0c;每颗SoC或者模块都有自己独有的功能&#xff0c;比如手机应用跑在AP芯片上&#xff0c;显示屏&#xff0c;3G/4G通信&#xff0c;WiFi/蓝牙等都有自己专门的SoC或者模块&#xff0…

下载并安装Visual Studio 2017过程

一、下载 1、下载链接 下载链接&#xff1a;官方网址 先登录 往下滑找到较早的下载 2、进行搜索下载 或者直接点击&#x1f517;网站跳转 3、确认系统信息进行下载 二、安装 下载完成后右键使用管理员身份运行 1、点击同意后安装 2、若报错—设置失败 打开控制面板-&g…

1-golang_org_x_crypto_bcrypt测试 --go开源库测试

1.实例测试 package mainimport ("fmt""golang.org/x/crypto/bcrypt" )func main() {password : []byte("mysecretpassword")hashedPassword, err : bcrypt.GenerateFromPassword(password, bcrypt.DefaultCost)if err ! nil {fmt.Println(err)…

卷积神经网络学习记录

目录 神经网络基础定义&#xff1a; 基本组成部分 工作流程 卷积层&#xff08;卷积定义&#xff09;【CONV】&#xff1a; 卷积层&#xff08;Convolutional Layer&#xff09; 特征提取&#xff1a;卷积层的主要作用是通过卷积核&#xff08;或滤波器&#xff09;运算提…

Java安全—JNDI注入RMI服务LDAP服务JDK绕过

前言 上次讲到JNDI注入这个玩意&#xff0c;但是没有细讲&#xff0c;现在就给它详细地讲个明白。 JNDI注入 那什么是JNDI注入呢&#xff0c;JNDI全称为 Java Naming and Directory Interface&#xff08;Java命名和目录接口&#xff09;&#xff0c;是一组应用程序接口&…