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