這是我所擁有的：
export default function Button({
btnLink = '',
btnText = 'generic text',
border = false,
}) {
return (
<BtnStyle border={border} className="button-wrapper">
<Link className="button" to={btnLink}>
{btnText}
</Link>
</BtnStyle>
);
}
還有按鈕本身：
<Button btnText="Download CV" btnLink="http://google.com" />
當我將一個站點（即“google.com”）添加到時BtnLink，它會在我的主頁上添加前綴。有什么建議嗎？
uj5u.com熱心網友回復：
使用Link會將地址鏈接附加到您的主頁。
查看更多Link來自 React Router：https ://v5.reactrouter.com/web/api/Link
您可以這樣做以在不同的選項卡中打開地址。
<button
className="button"
onClick={() => {
window.open(btnLink);
}}
>
{btnText}
</button>
或者，如果您想在同一選項卡中打開地址。
<button
className="button"
onClick={() => {
window.location.href = btnLink
}}
>
{btnText}
</button>
uj5u.com熱心網友回復：
使用Link組件 fromreact-router-dom將不適用于遠離您網站 URL 的外部鏈接。諸如此類的東西https://www.google.com不適用于該組件。相反，您需要在<a />這里有一個標簽并利用該href屬性。您可以簡單地將<a />標簽鏈接設定為按鈕的樣式，以便在單擊它后獲得您正在尋找的行為。這是使用自定義的代碼示例styled-component：
import React from 'react';
import styled from 'styled-components';
const LinkButtonComponent = styled.a`
text-decoration: none !important;
color: white;
background-color: green;
padding: 2px;
border-radius: 3px;
height: 50px;
width: 100px;
cursor: pointer;
`;
type LinkButtonProps = {
children: React.ReactNode;
};
export default function LinkButton({ children }: LinkButtonProps) {
return (
<LinkButtonComponent href='https://www.google.com'>
{children}
</LinkButtonComponent>
);
}轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/421955.html
標籤：
上一篇：單擊按鈕時使標題消失
下一篇：如何使用按鈕獲取檔案路徑？