react点击按钮跳转页面

在 React 中，可以使用 React Router 来实现页面的跳转。以下是一个简单的示例：

1. 首先，安装 React Router：

npm install react-router-dom

2. 在 App.js 中，导入 BrowserRouter 和 Route 组件：

import { BrowserRouter, Route } from 'react-router-dom';

3. 定义两个组件，分别用于显示当前页面和跳转后的页面：

import React from 'react';

function Home() {
  return <h1>这是首页</h1>;
}

function About() {
  return <h1>这是关于页面</h1>;
}

4. 在 App.js 中，使用 Route 组件来设置路由：

function App() {
  return (
    <BrowserRouter>
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </BrowserRouter>
  );
}

5. 在需要触发跳转的组件中，使用 Link 组件来设置跳转链接：

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/about">关于</Link>
        </li>
      </ul>
    </nav>
  );
}

这样，点击导航栏中的链接时，页面就会自动跳转到对应的路由。