如何在 React 中使用按钮作为链接

作者

在 React 中使用按钮作为链接

How to use a Button as a Link in React

要在 React 中使用按钮作为链接，如果使用 React 路由器，请将按钮包装在<a>标签或
组件中。Link将呈现按钮而不是链接，单击它将使浏览器导航到指定页面。

应用程序.js
import {BrowserRouter as Router, Link} from 'react-router-dom';

export default function App() {
  return (
    <Router>
      <div>
        {/* 👇️ react router link */}
        <Link to="/about">
          <button>Click</button>
        </Link>

        <br />
        <br />

        {/* 👇️ Anchor link */}
        <a href="https://google.com" target="_blank" rel="noreferrer">
          <button>Click</button>
        </a>
      </div>
    </Router>
  );
}

反应按钮链接

代码片段显示了如何在 React 中使用按钮作为链接，用于 React 路由器链接和本机锚标记。

在引擎盖下，Link组件实际上只是一个<a>标签，所以同样的方法适用。

单击该按钮将使浏览器导航到指定的页面或路由。

这种方法也适用于Button来自第三方库的自定义组件。

您只需将Button组件包装在一个Link或一个<a>标签中。

应用程序.js
import {BrowserRouter as Router, Link} from 'react-router-dom';

function Button({children}) {
  return <button>{children}</button>;
}

export default function App() {
  return (
    <Router>
      <div>
        {/* 👇️ react router link */}
        <Link to="/about">
          <Button>My custom button</Button>
        </Link>

        <br />
        <br />

        {/* 👇️ Anchor link */}
        <a href="https://google.com" target="_blank" rel="noreferrer">
          <Button>My custom button</Button>
        </a>
      </div>
    </Router>
  );
}

如果链接到外部 URL，请确保使用<a>标签而不是
Link组件。

React 路由器Link组件旨在仅用于内部导航。

当元素target上的属性设置为时，外部链接将在新选项卡中打开。a_blank

如果您想在同一选项卡中打开外部 URL，您可以删除该属性。

–

发表评论