脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 路由跳转及传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 浅析JS中什么是自定义react数据验证组件

    浅析JS中什么是自定义react数据验证组件

    我们在做前端表单提交时，经常会遇到要对表单中的数据进行校验的问题。这篇文章主要介绍了js中什么是自定义react数据验证组件,需要的朋友可以参考下
    2018-10-10
  • React Hooks钩子中API的使用示例分析

    React Hooks钩子中API的使用示例分析

    在react类组件（class）写法中，有setState和生命周期对状态进行管理，但是在函数组件中不存在这些，故引入hooks（版本：>=16.8），使开发者在非class的情况下使用更多react特性
    2022-08-08
  • react如何同步获取useState的最新状态值

    react如何同步获取useState的最新状态值

    这篇文章主要介绍了react如何同步获取useState的最新状态值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • react编写可编辑标题示例详解

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

    这篇文章主要为大家介绍了react编写可编辑标题示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • React Hooks useReducer 逃避deps组件渲染次数增加陷阱

    React Hooks useReducer 逃避deps组件渲染次数增加陷阱

    这篇文章主要介绍了React Hooks 之 useReducer 逃避deps后增加组件渲染次数的陷阱详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • React组件中使用JSON数据文件的方法详解

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

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

    用React实现一个完整的TodoList的示例代码

    本篇文章主要介绍了用React实现一个完整的TodoList的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 详解React setState数据更新机制

    详解React setState数据更新机制

    这篇文章主要介绍了React setState数据更新机制的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下
    2021-04-04
  • React+TypeScript项目中使用CodeMirror的步骤

    React+TypeScript项目中使用CodeMirror的步骤

    CodeMirror被广泛应用于许多Web应用程序和开发工具，之前做需求用到过codeMirror这个工具，觉得还不错，功能很强大，所以记录一下改工具的基础用法，对React+TypeScript项目中使用CodeMirror的步骤感兴趣的朋友跟随小编一起看看吧
    2023-07-07
  • 浅谈在react中如何实现扫码枪输入

    浅谈在react中如何实现扫码枪输入

    这篇文章主要介绍了浅谈在react中如何实现扫码枪输入，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07

最新评论