如何在带参数的函数组件中使用历史推送? - Javascript

在React的函数组件中，我们经常需要用到历史推送，以便在用户在页面上完成某些操作后能够跳转到另一个页面。

本文将介绍如何在带参数的函数组件中使用历史推送，以达到跳转页面的效果。

准备工作

在使用历史推送之前，我们需要先引入React Router。

首先，我们需要在项目中使用npm安装React Router。

npm install react-router-dom

然后，在我们的组件中引入React Router。

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

带参数的函数组件中的历史推送

在我们需要进行历史推送的函数组件中，我们可以使用useHistory钩子函数来获得history对象。history对象包含了我们需要进行历史推送的方法。

const Component = (props) => {

  const history = useHistory();

  const handleButtonClick = (id) => {
    history.push(`/path/to/page/${id}`);
  }

  return (
    <button onClick={() => handleButtonClick(props.id)}>跳转到新页面</button>
  );
}

上述代码中，我们在组件的顶部使用useHistory()函数获得history对象。

在函数内部，我们定义了一个handleButtonClick()函数，用于当用户点击按钮时进行历史推送。该函数接受一个id参数，用于构建跳转路径。我们使用history.push()方法进行历史推送，将跳转路径推送到浏览器的历史记录中。

最后，在组件的返回值中，我们将一个按钮渲染到页面上，并绑定了handleButtonClick()函数到按钮的onClick事件上。当用户点击按钮时，便会触发handleButtonClick()函数进行历史推送，跳转到另一个页面。

总结

本文介绍了如何在带参数的函数组件中使用历史推送。通过使用useHistory()函数获得history对象，我们可以在函数组件中进行历史推送，达到跳转页面的效果。

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

const Component = (props) => {

  const history = useHistory();

  const handleButtonClick = (id) => {
    history.push(`/path/to/page/${id}`);
  }

  return (
    <button onClick={() => handleButtonClick(props.id)}>跳转到新页面</button>
  );
}