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

要将按钮用作 React 中的链接,请将按钮包装在 <a> 标记中,如果使用 react 路由器,则将其包装在 Link 组件中。 该按钮将被呈现而不是链接,单击它将导致浏览器导航到指定的页面。

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://www.zadmei.com" target="_blank" rel="noreferrer">  
<button>Click</button>  
</a>  
</div>  
</Router>  
);  
}

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

代码片段展示了如何在 React 中将按钮用作反应路由器链接和本机锚标记的链接。

Link 组件实际上只是一个 <a> 标签,所以同样的方法也适用。

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

此方法也适用于第三方库中的自定义 Button 组件。

我们只需将 Button 组件包装在 Link 或 <a> 标记中。

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://www.zadmei.com" target="_blank" rel="noreferrer">  
<Button>My custom button</Button>  
</a>  
</div>  
</Router>  
);  
}

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

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

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

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