ReactJS按钮无法跳转至网站其他页面问题咨询

核心问题 #

你用的PrimaryButton和SecondaryButton这类自定义按钮组件，底层大概率是原生<button>标签——原生button并不支持href属性，所以直接加href="/about"不会触发页面跳转。

可行解决方案 #

方案1：用React Router的Link组件包裹按钮 #

如果你的项目基于React Router开发（绝大多数React单页应用都会用），把按钮嵌套在Link组件内即可：

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

<Actions>
  <Link to="/about">
    <PrimaryButton css="">Start Searching</PrimaryButton>
  </Link>
  <Link to="/about">
    <SecondaryButton>Learn More</SecondaryButton>
  </Link>
</Actions>

方案2：给按钮添加点击事件手动跳转 #

如果不用React Router，或者需要自定义跳转逻辑，直接给按钮加onClick事件：

<Actions>
  <PrimaryButton 
    css="" 
    onClick={() => window.location.href = '/about'}
  >
    Start Searching
  </PrimaryButton>
  <SecondaryButton 
    onClick={() => window.location.href = '/about'}
  >
    Learn More
  </SecondaryButton>
</Actions>

方案3：修改自定义按钮组件的底层实现 #

如果你有权限修改PrimaryButton/SecondaryButton的源码，可以让组件原生支持href：

• 把组件底层的<button>替换成<a>标签，保留按钮样式；
• 或者在组件内部接收href属性，自动绑定跳转逻辑。

示例修改：

// PrimaryButton.jsx
const PrimaryButton = ({ href, children, ...props }) => {
  if (href) {
    return (
      <a href={href} className="primary-button-style" {...props}>
        {children}
      </a>
    );
  }
  return (
    <button className="primary-button-style" {...props}>
      {children}
    </button>
  );
};

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