react history跳转页面携带对象

在React中使用`history`对象进行页面跳转时，可以将参数作为state传递。具体方法如下：

1. 在跳转时将参数作为state传递给`history.push()`方法：

history.push({
  pathname: '/your-path',
  state: { yourObject: yourValue }
})

2. 在接收页面从`location.state`获取参数：

const { yourObject } = props.location.state;

需要注意的是，`location.state`在浏览器刷新时会被清空，因此如果需要在刷新后仍然可以获取到传递的参数，可以考虑使用URL参数或者其他存储方案。

相关问题

react路由跳转携带参数

在React路由中，可以使用React Router提供的withRouter高阶组件或者Hook来获取当前路由的参数。

使用withRouter：

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

class MyComponent extends React.Component {
  handleClick = () => {
    const { history } = this.props;
    history.push(`/path/${paramValue}`);
  }

  render() {
    return (
      <button onClick={this.handleClick}>跳转</button>
    );
  }
}

export default withRouter(MyComponent);

使用Hook：

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

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

  const handleClick = () => {
    history.push(`/path/${paramValue}`);
  }

  return (
    <button onClick={handleClick}>跳转</button>
  );
}

export default MyComponent;

在路由配置中，可以使用动态路由来获取参数：

<Route path="/path/:paramValue" component={MyComponent} />

在MyComponent组件中，可以使用props.match.params.paramValue来获取参数值。例如：

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

class MyComponent extends React.Component {
  handleClick = () => {
    const { history, match } = this.props;
    history.push(`/path/${match.params.paramValue}`);
  }

  render() {
    const { match } = this.props;
    const paramValue = match.params.paramValue;

    return (
      <div>{paramValue}</div>
    );
  }
}

export default withRouter(MyComponent);

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` 获取到携带的数据，并进行展示。