如何通过按钮点击使用react-router跳转到指定路由？

前提确认 #

确保你的React项目已经完成react-router-dom的基础配置：

• 已安装react-router-dom依赖（未安装可执行npm install react-router-dom或yarn add react-router-dom）
• 根组件已被<BrowserRouter>（或其他路由容器组件）包裹

实现方式分两种场景 #

场景1：Button是函数组件（推荐） #

1. 从react-router-dom导入useNavigate钩子
2. 在组件内部调用useNavigate获取跳转函数navigate
3. 在按钮的onClick事件中调用navigate并传入目标路由路径

示例代码（Button.js）：

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

const Button = ({ to, children }) => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(to); // 传入目标路由，如'/home'、'/about'
  };

  return <button onClick={handleClick}>{children}</button>;
};

export default Button;

使用示例：

// 在其他组件中调用Button
<Button to="/home">回到首页</Button>
<Button to="/products">查看产品</Button>

场景2：Button是类组件 #

1. 从react-router-dom导入withRouter高阶组件
2. 用withRouter包裹你的类Button组件，使其能获取到history属性
3. 在onClick事件中调用this.props.history.push()传入目标路由

示例代码（Button.js）：

import { withRouter } from 'react-router-dom';
import React, { Component } from 'react';

class Button extends Component {
  handleClick = () => {
    this.props.history.push(this.props.to);
  };

  render() {
    return <button onClick={this.handleClick}>{this.props.children}</button>;
  }
}

// 用withRouter包裹组件
export default withRouter(Button);

替代方案：直接使用Link组件渲染为按钮 #

如果只是简单的跳转需求，无需自定义复杂逻辑，可以直接用react-router-dom的Link组件，通过as属性指定渲染为button：

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

// 使用方式
<Link to="/about" as="button">关于我们</Link>

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