react history.push 代码 demo

以下是一个简单的 React 应用程序中使用 `history.push()` 进行页面跳转的示例代码：

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

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

  const handleClick = () => {
    history.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleClick}>Go to About Page</button>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page.</p>
      <Link to="/">Go back to Home Page</Link>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
      </Switch>
    </Router>
  );
};

export default App;

在上面的示例代码中，我们首先导入 `useHistory` 钩子，然后在 `Home` 组件中使用 `useHistory` 钩子来获取 `history` 对象。我们定义了一个 `handleClick` 函数，在点击按钮时使用 `history.push('/about')` 来跳转到关于页面。在 `About` 组件中，我们使用 `Link` 组件来返回到主页。最后，我们将 `Home` 和 `About` 组件包装在 `Switch` 和 `Route` 组件中，并将其添加到 `Router` 组件中。