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

server/2024/11/28 15:28:08/

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.ppmy.cn/server/145658.html

相关文章

【贪心算法第七弹——674.最长连续递增序列(easy)】

目录 1.题目解析 题目来源 测试用例 2.算法原理 3.实战代码 代码分析 1.题目解析 题目来源 674.最长递增子序列——力扣 测试用例 2.算法原理 贪心思路 3.实战代码 class Solution { public:int findLengthOfLCIS(vector<int>& nums) {int n nums.size();in…

基础入门-Web应用架构类别源码类别镜像容器建站模版编译封装前后端分离

知识点&#xff1a; 1、基础入门-Web应用-搭建架构上的技术要点 2、基础入门-Web应用-源码类别上的技术要点 一、演示案例-架构类别-模版&分离&集成&容器&镜像 1、套用模版型 csdn / cnblog / github / 建站系统等 安全测试思路上的不同&#xff1a; 一般…

c++的虚继承说明、案例、代码

虚继承的基本概念 在 C 中&#xff0c;虚继承主要用于解决多继承时可能出现的菱形继承问题。菱形继承是指一个类有两个&#xff08;或更多&#xff09;子类&#xff0c;而这两个子类又同时继承自一个共同的基类&#xff0c;当这些子类又被另一个类继承时&#xff0c;就形成了菱…

python读txt文件时出现UnicodeDecodeError错误的解决

1 现象 在编写文件读的代码&#xff1a; src_file_path "a:\\src.txt" with open(src_file_path) as file:data file.readline()出现如下错误&#xff1a; > UnicodeDecodeError: gbk codec cant decode byte 0xab in position 2: illegal multibyte sequenc…

【网络安全设备系列】12、态势感知

0x00 定义&#xff1a; 态势感知&#xff08;Situation Awareness&#xff0c;SA&#xff09;能够检测出超过20大类的云上安全风险&#xff0c;包括DDoS攻击、暴力破解、Web攻击、后门木马、僵尸主机、异常行为、漏洞攻击、命令与控制等。利用大数据分析技术&#xff0c;态势感…

线索二叉树

1.什么是线索二叉树&#xff1f; 线索二叉树是一种特殊的二叉树&#xff0c;它在传统二叉树的基础上&#xff0c;利用节点中原本为空的指针域存储指向节点前驱或后继的信息&#xff0c;从而在遍历时不需要递归或栈辅助&#xff0c;能够高效地找到前驱或后继节点。 前序遍历&am…

代码随想录打卡DAY20

算法记录第20天 [二叉树] 1.LeetCode 501. 二叉搜索树中的众数 题目描述&#xff1a; 给你一个含重复值的二叉搜索树&#xff08;BST&#xff09;的根节点 root &#xff0c;找出并返回 BST 中的所有 众数&#xff08;即&#xff0c;出现频率最高的元素&#xff09;。如果树…

深入解析经典排序算法:原理、实现与优化

文章目录 6. 堆排序&#xff08;Heap Sort&#xff09;原理Java 实现 7. 希尔排序&#xff08;Shell Sort&#xff09;原理Java 实现 8. 计数排序&#xff08;Counting Sort&#xff09;原理Java 实现 9. 基数排序&#xff08;Radix Sort&#xff09;原理Java 实现 深入浅出&am…