reacrt用函数组件页面如何进行页面跳转的同时携带对象数据，并在被跳转页面获取数据

在 React 中使用函数组件实现页面跳转并携带对象数据，可以使用 `useHistory` 钩子和 React Router。

首先，确保已经安装了 `react-router-dom` 包。

1. 在你的函数组件中，导入 `useHistory` 和 `Link`。

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

2. 在函数组件中，使用 `useHistory` 钩子获取路由历史记录。

const history = useHistory();

3. 在页面跳转时，使用 `history.push` 方法进行跳转，并通过第二个参数传递携带的数据。

history.push("/target", { data: { foo: "bar" } });

4. 在被跳转的页面中，可以通过 `props.location.state` 获取传递的数据。

const TargetComponent = (props) => {
  const { data } = props.location.state;

  return (
    <div>
      <h1>Target Component</h1>
      <p>Data: {JSON.stringify(data)}</p>
    </div>
  );
};

完整的示例代码如下：

import React from "react";
import { useHistory, Link, BrowserRouter as Router, Route } from "react-router-dom";

const App = () => {
  const history = useHistory();

  const handleRedirect = () => {
    history.push("/target", { data: { foo: "bar" } });
  };

  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <button onClick={handleRedirect}>Go to Target Component</button>
            </li>
          </ul>
        </nav>

        <Route path="/target" component={TargetComponent} />
      </div>
    </Router>
  );
};

const TargetComponent = (props) => {
  const { data } = props.location.state;

  return (
    <div>
      <h1>Target Component</h1>
      <p>Data: {JSON.stringify(data)}</p>
    </div>
  );
};

export default App;

在上面的示例中，我们使用 `useHistory` 钩子获取路由历史记录，并在点击按钮时通过 `history.push` 进行页面跳转，并携带了对象数据。在 `TargetComponent` 组件中，我们通过 `props.location.state` 获取到携带的数据，并进行展示。