資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 ReactJS 中使用 Link 元件？
連結對於任何應用程式導航不同的網頁都很重要。我們可以使用 <a> 標籤在 HTML 中建立連結。但是，Material UI 庫提供了 Link 元件來建立一個時尚的連結。
使用者可以執行以下命令在 React 專案中安裝 Material UI 庫。
npm install @mui/material @emotion/react @emotion/styled
語法
使用者應遵循以下語法來使用 Material UI 的 Link 元件。
<Link href = "#"> Link </Link>
在上述語法中，href 接收目標網頁的連結。
示例 1（基本 Link 元件）
我們將透過以下示例學習如何在 React 應用程式中使用 Material UI 的 Link 元件。我們已將 tutorialspoint 網站主頁的連結新增為 'href' 屬性的值。
import React from "react";
import Link from '@mui/material/Link';
const App = () => {
return (
<div>
<h3>
{" "}
Using the <i> Link </i> Component of the Material UI to add links {" "}
</h3>
<Link href = "https://tutorialspoint.tw/index.htm"> Link </Link>
</div>
);
};
export default App;
輸出
在輸出中，當用戶點選連結時，它會將他們重定向到 TutorialsPoint 網站的主頁。
示例 2（向連結新增下劃線）
在下面的示例中，我們將使用 underline 屬性自定義 Link 元件的樣式。在第一個 Link 元件中，我們將 underline 設定為 none，因此它不包含任何下劃線。
第二個 Link 元件在使用者懸停在連結上時顯示下劃線，第三個 Link 元件始終顯示下劃線。
import React from "react";
import Link from "@mui/material/Link";
const App = () => {
return (
<div>
<h3>
{" "}
Using the <i> Link </i> Component of the Material UI to add links {" "}
</h3>
<Link href = "#" underline = "none">
Link 1
</Link>
<br></br>
<Link href = "#" underline = "hover">
Link 2
</Link>
<br></br>
<Link href = "#" underline = "always">
Link 3
</Link>
</div>
);
};
export default App;
輸出
示例 3（帶有 Paper 元件的 Link 元件）
我們可以將連結新增到其他元件，例如 Paper、卡片等。此外，我們可以使用 Link 元件向特定 div 新增連結。在下面的示例中，我們已從 Material UI 匯入 Paper 元件，並將其新增到 Link 元件之間。
import React from "react";
import Link from "@mui/material/Link";
import Paper from "@mui/material/Paper";
import { Box } from "@mui/system";
const App = () => {
return (
<div>
<h3>
{" "}
Using the <i> Link </i> Component of the Material UI to add links with the Paper component {" "}
</h3>
<Link href = "#" underline = "none">
<Box
Sx = {{
"& > :not(style)": {
m: 1,
width: 100,
height: 100,
},
}}
>
<Paper elevation = {24}> This is a link! </Paper>
</Box>
</Link>
</div>
);
};
export default App;
輸出
在輸出中，使用者可以觀察到整個 Paper 元件都是可點選的。
透過本教程，使用者學習瞭如何在 ReactJS 中使用 Link 元件。我們學習了 Link 元件的基本用法。此外，我們學習瞭如何自定義 Link 元件，以及如何將 Link 新增到自定義元件（例如卡片）。此外，使用者可以在 Link 元件上設定事件，例如 onclick 事件。
607 次檢視
