React中如何通过点击按钮实现页面跳转？（返回首页场景）

基于你已使用react-router-dom配置路由的情况，以下是两种简单的实现方案：

方法一：使用useNavigate钩子（命令式导航） #

适合需要在跳转前处理额外逻辑的场景：

1. 在BlackWhite.js中导入useNavigate钩子
2. 初始化导航函数
3. 在点击事件中调用导航函数跳转到首页

修改后的BlackWhite.js代码：

import { useNavigate } from 'react-router-dom'; // 新增导入

export default function BlackWhite() {
  const navigate = useNavigate(); // 初始化导航函数

  const handleClick = () => {
    navigate('/'); // 跳转到首页路径
  };

  return (
    <div className="BlackWhite">
      <h1>Black and white</h1>
      <button onClick={handleClick}>Back to homepage</button>
    </div>
  );
}

方法二：使用Link组件（声明式导航） #

更贴合React Router的设计理念，无需手动处理点击事件：

1. 在BlackWhite.js中导入Link组件
2. 将按钮替换为Link组件（或用Link包裹按钮以保留原生按钮样式）

直接替换为Link组件 #

import { Link } from 'react-router-dom'; // 新增导入

export default function BlackWhite() {
  return (
    <div className="BlackWhite">
      <h1>Black and white</h1>
      <Link 
        to="/" 
        style={{ 
          textDecoration: 'none', 
          padding: '8px 16px', 
          border: '1px solid #000', 
          backgroundColor: '#fff', 
          cursor: 'pointer' 
        }}
      >
        Back to homepage
      </Link>
    </div>
  );
}

保留原生按钮标签 #

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

export default function BlackWhite() {
  return (
    <div className="BlackWhite">
      <h1>Black and white</h1>
      <Link to="/">
        <button>Back to homepage</button>
      </Link>
    </div>
  );
}

注意：嵌套交互式元素（Link包裹button）可能触发浏览器警告，更推荐第一种useNavigate方案。

内容的提问来源于stack exchange，提问作者transpose