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

React 2年前 31

要将按钮用作 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>  
);  
}