React框架下点击按钮实现路由页面跳转的问题咨询

错误点说明 #

1. Route 组件仅用于定义路由匹配规则，不存在替代 Link 组件的说法，两者功能完全独立。
2. 你当前的代码写法错误：onClick 事件需要接收函数作为回调值，不能直接传入React组件。

实现方案 #

方案1：组件式跳转（最简实现）

直接用 Link 组件包裹按钮，无需额外写点击回调：

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

<Link to="/trade">
  <button className='btn-success btn btn-lg'>Trade This Stock</button>
</Link>

方案2：编程式跳转（适合跳转前需要执行额外逻辑的场景）

React Router v6 版本写法

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

function YourComponent() {
  // 调用useNavigate钩子获取跳转方法
  const navigate = useNavigate();

  return (
    <button 
      className='btn-success btn btn-lg' 
      onClick={() => navigate('/trade')}
    >
      Trade This Stock
    </button>
  );
}

React Router v5 及更早版本写法

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

function YourComponent() {
  // 调用useHistory钩子获取历史实例
  const history = useHistory();

  return (
    <button 
      className='btn-success btn btn-lg' 
      onClick={() => history.push('/trade')}
    >
      Trade This Stock
    </button>
  );
}

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