用按钮实现React点击跳转页面

你可以使用 react-router-dom 库来实现 React 点击跳转页面的功能。首先需要在项目中安装该库，可以在终端中使用以下命令安装：

npm install --save react-router-dom

接下来可以在需要跳转的组件中使用 Link 组件来实现跳转。例如：

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

function MyComponent() {
  return (
    <div>
      <h2>My Component</h2>
      <<Link to="/other-page">
        <button>Go to other page</button>
      </Link>
    </div>
  );
}

其中 to 属性设置跳转的路径，按钮的文本可以放在 button 标签中。当点击按钮时，页面会自动跳转到指定的路径。

相关问题

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>
  );
}

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

点击一个按钮跳转页面，react路由

在React中实现路由可以使用React Router库。首先需要安装React Router：

npm install react-router-dom

然后在App.js中引入Router和Route组件：

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

import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

function App() {
  return (
    <Router>
      <div>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
      </div>
    </Router>
  );
}

export default App;

上面代码中，exact表示只有当路径完全匹配时才渲染HomePage组件。path属性指定了路由的路径，component属性指定了要渲染的组件。

现在，在HomePage组件中添加一个链接跳转到AboutPage组件：

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

function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link to="/about">About Page</Link>
    </div>
  );
}

export default HomePage;

Link组件用于创建导航链接，to属性指定了要跳转的路径。

最后，在AboutPage组件中添加一个返回按钮回到HomePage组件：

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

function AboutPage() {
  return (
    <div>
      <h1>About Page</h1>
      <Link to="/">Back to Home Page</Link>
    </div>
  );
}

export default AboutPage;

以上就是一个简单的React路由实现。