我是初學者，我正在嘗試學習 Next js。我有一個帶有卡片的網頁，并且在卡片中我有一個右箭頭。我希望在單擊右箭頭時打開一個鏈接。
我有這個 ArrowRight 的代碼，我基本上想打開一個鏈接，讓我們說 google.com 在一個新的標簽中點擊這個。
<ArrowRight
className="heart"
onClick={}
/>
uj5u.com熱心網友回復：
你可以簡單地用“a”標簽包裝它
像這樣 ：
<a href="https://www.google.com/" target="_blank">
<ArrowRight
className="heart"
/>
</a>
或者你可以使用 nextjs 的 Link 組件
像這樣 ：
<Link href="https://google.com" rel="noopener noreferrer" target="_blank">
<ArrowRight
className="heart"
/>
</Link>
uj5u.com熱心網友回復：
我不做 Next.js。但我希望這會奏效
export default function SampleComponent(){
const redirectPage= (e) => {
e.preventDefault()
document.location.href = 'https://google.com/';
}
return(
<div>
<ArrowRight
className="heart"
onClick={() => redirectPage()}
/>
</div>
)
}
uj5u.com熱心網友回復：
你可以做兩件事，
選項 1 使用鏈接標簽，
import Link from "next/link";
<Link href="https://www.google.com/" target="_blank">
<ArrowRight
className="heart"
/>
</Link >
第二個 您可以使用程式化導航。這有兩個變化。如果您需要在您的應用程式內進行路由。
import { useRouter } from "next/router";
const YourComponent = props => {
const router = useRouter();
const routeWithinYourApp = () => {
Router.push("INTERNAL URL");
};
return <ArrowRight className="heart" onClick={routeWithinYourApp} />;
};
如果你使用外部網址，沒什么特別的，
window.location = 'YOUR EXTERNAL LINK';
uj5u.com熱心網友回復：
<ArrowRight
className="heart"
onClick={() => window.open("google.com", "_blank")}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/532013.html