×

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

作者:Terry2023.05.06来源:Web前端之家浏览:2702评论:0
关键词:React

react应用: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,需要进行判断处理。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/react20230206.html

网友评论文明上网理性发言 已有0人参与

发表评论: