脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react 路由跳转及传参

react中路由跳转及传参的实现

 更新时间：2023年05月05日 15:44:59   作者：这个很好吃  
本文主要介绍了react中路由跳转及传参的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

1.useNavigate

useNavigate 是 React Router v6 中新增的一个 hook，可以用来进行路由跳转。

使用 useNavigate hook 首先需要安装 react-router-dom@next，然后在函数式组件中引入：

import { useNavigate } from 'react-router-dom';
function MyComponent() {
  const navigate = useNavigate();
  function handleClick() {
    navigate('/target-path');
  }
  return (
    <button onClick={handleClick}>跳转到目标路径</button>
  );
}

useNavigate 返回一个 navigate 函数，可以用来进行路由跳转和监听路由变化。与 history.push 不同，navigate 不会在浏览器历史记录中添加重复的路由记录。如果需要添加新的历史记录，可以使用 navigate({ pathname, state }) 的形式。

import { useNavigate } from 'react-router-dom';
function MyComponent() {
  const navigate = useNavigate();
  function handleClick() {
    navigate('/target-path', { state: { name: 'John', age: 25 } });
  }
  return (
    <button onClick={handleClick}>跳转到目标路径</button>
  );
}

navigate 函数还可以接收一个 options 对象，可以用来配置路由跳转的方式。以下是一些常用的配置选项：

  • replace：是否替换当前页面的历史记录；
  • state：传递的状态数据；
  • replace：是否替换当前页面的历史记录；
  • shoudlNavigate：是否允许进行路由跳转；
  • replace：是否替换当前页面的历史记录。
import { useNavigate } from 'react-router-dom';
function MyComponent() {
  const navigate = useNavigate();
  function handleClick() {
    navigate('/target-path', {
      state: { name: 'John', age: 25 },
      replace: true,
      shouldNavigate: true
    });
  }
  return (
    <button onClick={handleClick}>跳转到目标路径</button>
  );
}

2.useLocation

在 React Router 中，可以通过 useLocation hook 来获取传递的参数和路径信息。以下是一个示例：

import { useLocation } from 'react-router-dom';
function TargetComponent() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const name = searchParams.get('name');
  const age = searchParams.get('age');
  const data = location.state;
  return (
    <div>
      <p>当前路径：{location.pathname}</p>
      <p>查询参数：{`name=${name}, age=${age}`}</p>
      <p>状态数据：{JSON.stringify(data)}</p>
    </div>
  );
}

在目标页面中，可以通过 useLocation hook 获取路由路径信息和传递的参数，然后使用 URLSearchParams 对象和 location.state 属性来获取具体的值。其中：

  • location.pathname 表示当前页面的路径；
  • location.search 表示传递的查询参数，可以使用 URLSearchParams 对象来进行解析；
  • location.state 表示传递的状态数据，可以在目标页面中获取。

注意，在使用 URLSearchParams 对象时，需要先调用 new URLSearchParams(location.search) 来创建一个实例，然后调用 get 方法来获取具体的参数值。

使用 useNavigate 进行路由跳转并传递参数的示例如下：

import { useNavigate } from 'react-router-dom';
function MyComponent() {
  const navigate = useNavigate();
  function handleClick() {
    navigate('/target-path', { state: { name: 'John', age: 25 } });
  }
  return (
    <button onClick={handleClick}>跳转到目标路径</button>
  );
}

3.示例

在跳转到目标路径时，可以使用 state 选项来传递数据。在目标页面中，可以使用 useLocation hook 获取传递的数据，示例如下：

import { useLocation } from 'react-router-dom';
function TargetComponent() {
  const location = useLocation();
  const data = location.state;
  return (
    <div>
      <p>姓名：{data.name}</p>
      <p>年龄：{data.age}</p>
    </div>
  );
}

在目标页面中，可以通过 location.state 属性获取传递的数据。注意，如果没有传递数据，则 location.state 的值为 undefined，需要进行判断处理。

到此这篇关于react中路由跳转及传参的实现的文章就介绍到这了,更多相关react 路由跳转及传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 详解React 代码共享最佳实践方式

    详解React 代码共享最佳实践方式

    这篇文章主要介绍了React 代码共享最佳实践方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-05-05
  • React组件中监听函数获取不到最新的state问题

    React组件中监听函数获取不到最新的state问题

    这篇文章主要介绍了React组件中监听函数获取不到最新的state问题问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 一文搞懂redux在react中的初步用法

    一文搞懂redux在react中的初步用法

    Redux是JavaScript状态容器，提供可预测化的状态管理，今天通过本文给大家分享redux在react中使用及配置redux到react项目中的方法，感兴趣的朋友跟随小编一起看看吧
    2021-06-06
  • react学习笔记之state以及setState的使用

    react学习笔记之state以及setState的使用

    这篇文章主要介绍了react学习笔记之state以及setState的使用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 解决React初始化加载组件会渲染两次的问题

    解决React初始化加载组件会渲染两次的问题

    这篇文章主要介绍了解决React初始化加载组件会渲染两次的问题,文中有出现这种现象的原因及解决方法,感兴趣的同学跟着小编一起来看看吧
    2023-08-08
  • 详解React Native中如何使用自定义的引用路径

    详解React Native中如何使用自定义的引用路径

    这篇文章主要为大家介绍了React Native中如何使用自定义的引用路径详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • React-Native之定时器Timer的实现代码

    React-Native之定时器Timer的实现代码

    本篇文章主要介绍了React-Native之定时器Timer的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • React技巧之中断map循环的方法详解

    React技巧之中断map循环的方法详解

    这篇文章主要和大家来分享一下React的技巧之如何中断map循环，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下
    2023-06-06
  • React 三大属性之state的使用详解

    React 三大属性之state的使用详解

    这篇文章主要介绍了React 三大属性之state的使用详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
    2021-04-04
  • ReactNative Image组件使用详解

    ReactNative Image组件使用详解

    本篇文章主要介绍了ReactNative Image组件使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论