react路由push跳转传参

在React中，可以使用react-router-dom提供的路由系统来进行页面跳转和传参。在使用push方法进行跳转时，可以在第二个参数中传递一个对象，该对象中包含需要传递的参数。具体实现代码如下所示：

import { useHistory } from 'react-router-dom';

function Example() {
  const history = useHistory();

  function handleClick() {
    history.push('/path', { name: 'react', msg: 'react' });
  }

  return (
    <button type="button" onClick={handleClick}>
      跳转到path页面并传递参数
    </button>
  );
}

在接收参数的页面中，可以通过props.location.state来获取传递的参数。具体实现代码如下所示：

function Path(props) {
  const { name, msg } = props.location.state;

  return (
    <div>
      <p>name: {name}</p>
      <p>msg: {msg}</p>
    </div>
  );
}

相关问题

react hooks 路由跳转传参

### 回答1：
React Hooks 路由跳转传参可以使用 React Router 提供的 useHistory 钩子函数。具体步骤如下：

1. 在组件中引入 useHistory 钩子函数：

import { useHistory } from 'react-router-dom';

2. 在组件中调用 useHistory 函数获取 history 对象：

const history = useHistory();

3. 使用 history.push 方法进行路由跳转，并在第二个参数中传入参数对象：

history.push('/path', { param1: 'value1', param2: 'value2' });

4. 在目标组件中使用 useLocation 钩子函数获取传入的参数：

import { useLocation } from 'react-router-dom';

const MyComponent = () => {
  const location = useLocation();
  const { param1, param2 } = location.state;
  // do something with param1 and param2
}

以上就是使用 React Hooks 实现路由跳转传参的方法。

### 回答2：
React Hooks 是 React 16.8 版本新增的新特性。它允许我们在不编写类组件的情况下使用状态和其他 React 特性。使用 React Hooks，我们可以在函数式组件中使用 React 的生命周期方法、state、上下文、ref、useReducer 和 useEffect 等功能。当然，React Hooks 还有一系列相关的 API，比如 useContext、useCallback、useMemo、useRef、useState 等等。

React Hooks 的出现，使得 React 官方推荐的编程风格从类组件转向了函数式组件。React Hooks 的使用可以使得代码更简洁、易读、可维护，并且具有更好的性能和稳定性。React Hooks 的应用非常广泛，如表单处理、组件通信、状态管理、Ajax 请求、动画效果、路由跳转等等。

路由跳转是开发 Web 应用程序非常重要的一部分。在 React 应用中，我们可以使用 React Router 来进行路由跳转功能的实现。React Router 有三种基本路由类型：BrowserRouter、HashRouter 和 MemoryRouter。React Router 提供了很多组件来实现路由跳转。最常见的是 Link 组件和 Route 组件。

在进行路由跳转时，我们可能需要在不同页面之间传递参数。对于类组件来说，我们可以在进行路由跳转的时候，通过 props 进行参数的传递。但对于函数式组件来说，如何进行路由跳转传参呢？

React Router 为我们提供了 useHistory、useLocation 和 useParams 等 Hooks 来实现路由跳转传参。其中最常用的是 useHistory 和 useLocation。history 对象代表浏览器的历史记录栈，可以使用 push 方法和 replace 方法进行路由跳转。location 对象代表当前页面的 URL 信息，可以获取 pathname、search 和 hash 信息。

举个例子，在一个 useLocation，然后使用 history.push 方法进行简单的路由跳转传参：

import React from 'react';
import { useHistory, useLocation } from 'react-router-dom';

const Article = () => {
  const history = useHistory();
  const location = useLocation();

  const handleClick = () => {
    history.push({
      pathname: '/detail',
      search: `?id=${location.search.slice(4)}`,
      state: { from: location.pathname },
    });
  };

  return (
    <div>
      <h2>Article</h2>
      <p>This is an article page.</p>
      <button onClick={handleClick}>Go to detail page</button>
    </div>
  );
};

export default Article;

以上就是使用 React Hooks 实现路由跳转传参的基本思路和示例代码。通过使用 useHistory 和 useLocation Hooks，我们可以轻松实现路由传参功能，在 React 应用中更简洁、易读、可维护，并且具有更好的性能和稳定性。

### 回答3：
React Hooks 是 React 16.8.0 版本推出的特性，它是一组可以让函数组件拥有类组件中状态和生命周期函数等功能的 API。而 React Router 是一个基于 React 的声明式路由库，它让我们可以通过声明式的方式实现路由切换和传参等功能。

在 React Hooks 中，我们可以使用 useHistory 和 useLocation 两个 Hook 来实现路由跳转和传参。useHistory Hook 可以获取到一个 history 对象，我们可以通过它实现浏览器历史记录的跳转。而 useLocation Hook 则可以获取到当前路由的信息，包括路径和查询参数等。

要实现路由跳转传参，我们可以先定义一个函数组件，然后在组件内部使用 useHistory 和 useLocation Hook：

import { useHistory, useLocation } from "react-router-dom";

function MyComponent() {
  const history = useHistory();
  const location = useLocation();

  function handleClick() {
    const myData = {
      name: "John",
      age: 30
    };
    history.push({
      pathname: "/otherPage",
      search: "?myParam=" + JSON.stringify(myData)
    });
  }

  return (
    <button onClick={handleClick}>跳转到其他页面</button>
  );
}

在 handleClick 函数中，我们创建了一个包含了传递参数的对象 myData，并以字符串的形式序列化。然后，我们使用 history.push 方法跳转到了 "/otherPage" 路径，并将 myData 传递给了 search 属性，这样在路由切换后，我们就可以在其他页面中通过 useLocation Hook 获取到传递的参数了：

import { useLocation } from "react-router-dom";

function OtherPage() {
  const location = useLocation();
  const myParam = location.search ? JSON.parse(location.search.split("=")[1]) : null;
  console.log(myParam); // { name: "John", age: 30 }

  return (
    <div>其他页面</div>
  );
}

在 OtherPage 组件中，我们使用 useLocation Hook 获取到了当前的路由信息，并通过 JSON.parse 方法将序列化后的字符串反序列化成了对象 myParam。最后，我们可以在控制台中看到 myParam 中的参数值。

react histroy.push 路由跳转传参

在React中，也可以通过React Router实现路由跳转，并且可以通过`history.push`方法进行传参。具体实现如下：

import { useHistory } from 'react-router-dom';

function Example() {
  const history = useHistory();

  function handleClick() {
    history.push('/destination', { foo: 'bar' });
  }

  return (
    <button type="button" onClick={handleClick}>
      Go to destination
    </button>
  );
}

其中，`useHistory`是一个React Router提供的Hook函数，用于获取`history`对象。在`handleClick`函数中，通过`history.push`方法进行路由跳转，第一个参数表示目标路由的路径，第二个参数表示传递的参数，它们都是一个对象。在目标路由中可以通过`location.state`来获取传递的参数，例如：

console.log(location.state.foo) // 'bar'

需要注意的是，使用`history.push`方法进行路由跳转时，会向浏览器的历史记录中添加一个新的记录，因此用户可以通过浏览器的后退按钮返回到上一个页面。如果不需要添加历史记录，可以使用`history.replace`方法进行路由跳转。