如何在React.js中单击按钮重定向到另一个页面

在React中，页面重定向不直接等同于服务器端的Response.Redirect，因为React是一个前端JavaScript库，它管理的是用户界面而非服务器响应。要在React中实现页面跳转，你可以使用React Router，这是一个广泛使用的路由库，可以让你在单页应用（SPA）中实现不同的视图切换。

首先，确保你已经安装了react-router-dom。如果还没有安装，可以通过以下命令进行安装：

npm install react-router-dom

然后，你可以在你的应用中设置基本的路由。这里是如何修改你的代码以使用React Router进行页面跳转的一个示例：

1. App.js - 设置路由

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './App.css';
import Apps from './Apps';
import Components from './Components';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Apps} />
        <Route path="/components" component={Components} />
      </Switch>
    </Router>
  );
}

export default App;

1. Apps.js - 修改按钮点击事件以使用useHistory进行导航

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

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

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

  return (
    <div className="App">
      <header className="App-header">
        <img src="./logo.svg" className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={handleClick}>Click Me</button>
      </header>
    </div>
  );
}

export default Apps;

1. Components.js - 保持不变，但请确保导出组件名称与引用时一致（注意大小写敏感）。

function Components() {
  return (
    <div>
      <h1>Welcome to the world.</h1>
    </div>
  );
}

export default Components;

通过上述修改，当你点击"Click Me"按钮时，页面将会重定向到/components路径，从而显示Components组件的内容。这就是在React中实现页面跳转的方式。