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

在 React 页面中，可以使用 React Router 来实现页面跳转，并且携带对象数据。下面是一个示例：

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

1. 在你的路由配置文件中，指定需要跳转的路径和组件。例如，可以在 `App.js` 文件中定义路由：

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import TargetComponent from "./TargetComponent";

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to={{ pathname: "/target", state: { data: { foo: "bar" } } }}>
                Go to Target Component
              </Link>
            </li>
          </ul>
        </nav>

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

export default App;

在上面的示例中，我们使用了 `<Link>` 组件来创建一个链接，通过 `to` 属性指定了跳转的路径以及携带的数据。

2. 在目标组件 `TargetComponent` 中，可以通过 `props.location.state` 获取跳转时携带的数据。

import React from "react";

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

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

export default TargetComponent;

在上面的示例中，我们通过 `props.location.state` 获取到了跳转时携带的数据，并在页面中进行展示。

这样，当点击链接时，会跳转到 `TargetComponent` 页面，并且可以在该页面获取到携带的对象数据。