脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 父子组件之间通讯props

    react 父子组件之间通讯props

    这篇文章主要介绍了react 父子组件之间通讯props，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React UI组件库ant-design的介绍与使用

    React UI组件库ant-design的介绍与使用

    Ant Design是阿里蚂蚁金服团队基于React开发的ui组件,主要用于中后台系统的使用,这篇文章主要介绍了React UI组件库ant-design的介绍与使用,需要的朋友可以参考下
    2023-12-12
  • React Hook父组件如何获取子组件的数据/函数

    React Hook父组件如何获取子组件的数据/函数

    这篇文章主要介绍了React Hook父组件如何获取子组件的数据/函数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Electron整合React使用搭建开发环境的步骤详解

    Electron整合React使用搭建开发环境的步骤详解

    这篇文章主要介绍了Electron整合React使用搭建开发环境，本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2020-06-06
  • React Native验证码倒计时工具类分享

    React Native验证码倒计时工具类分享

    这篇文章主要为大家分享了React Native验证码倒计时工具类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • React组件中使用JSON数据文件的方法详解

    React组件中使用JSON数据文件的方法详解

    要在 React 组件中使用 JSON 数据,有多种方法,这篇文章主要为大家详细介绍了五个常见的方法,文中的示例代码讲解详细,有需要的小伙伴可以了解下
    2024-01-01
  • React Native日期时间选择组件的示例代码

    React Native日期时间选择组件的示例代码

    本篇文章主要介绍了React Native日期时间选择组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • react编写可编辑标题示例详解

    react编写可编辑标题示例详解

    这篇文章主要为大家介绍了react编写可编辑标题示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • React Native 脚手架的基本使用详解

    React Native 脚手架的基本使用详解

    这篇文章主要介绍了React Native 脚手架的基本使用详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-04-04
  • 详解React 元素渲染

    详解React 元素渲染

    这篇文章主要介绍了React 元素渲染的相关资料，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-07-07

最新评论