ReactJs 如何使用链接组件

链接对于任何应用程序来说都是很重要的，它可以导航不同的网页。我们可以在HTML中使用标签来创建链接。然而，Material UI库提供了Link组件来创建一个时尚的链接。

用户可以执行下面的命令，在React项目中安装Material UI库。

npm install @mui/material @emotion/react @emotion/styled

语法

用户应该按照下面的语法来使用Material UI的Link组件。

<Link href = "#"> Link </Link>

在上述语法中，href需要一个指向目标网页的链接。

示例1（基本链接组件）

我们将通过下面的例子学习如何在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://www.tutorialspoint.com/index.htm"> Link </Link>
      </div>
   );
};
export default App;

输出

在输出中，当用户点击该链接时，它会将用户重定向到TutorialsPoint网站的主页。

例2（给链接添加下划线）

在下面的例子中，我们将通过使用下划线道具来定制链接组件的样式。在第一个链接组件中，我们将下划线设置为无，所以它不包含任何下划线。

第二个链接组件在我们悬停在链接上时显示下划线，第三个链接组件始终显示下划线。

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、卡片等。此外，我们还可以使用链接组件向特定的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;