文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-05-19 08:39

关注

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 对象,可以用来配置路由跳转的方式。以下是一些常用的配置选项:

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 属性来获取具体的值。其中:

注意,在使用 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 路由跳转及传参内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯