React MUI路由

React MUI是一个UI库，提供了功能齐全的组件，将我们自己的设计系统带到生产就绪的组件中。MUI是一个用户界面库，为更快速和简便的Web开发提供了预定义和可定制的React组件，这些Material-UI组件基于Google的Material Design。

在这篇文章中，我们将讨论React MUI路由。React MUI提供了一套强大的组件，帮助您在React应用程序中创建一致和专业的用户界面。通过MUI，您可以轻松地将React Router与Material-UI组件集成。它使用 <Link> 组件在不同屏幕之间进行导航。

路由内容：

• 导航组件：为了执行导航，我们有两个主要组件，即 Link 会呈现一个原生的 <a> 元素并将 href 作为属性应用，第二个是导航动作，如按钮组件等。
• 全局主题 Link：通过系统地使用增强的 Link 组件，提高用户体验并创建全局主题 Link 组件。
• 组件属性：借助组件属性，我们可以轻松地集成第三方库。Link、Button、列表和选项卡是一些示例。
• 更多示例：要在React应用程序中添加路由，Next.js 和 Gatsby 也是使用 Link 组件的选项。

语法：

<Link href="/">...</Link>

创建React项目:

步骤1:
通过npm命令安装 React 模块以创建 React 应用程序。

npm create-react-app project name

步骤2：
创建完你的 React 项目后，进入文件夹以执行不同的操作。

cd project name

步骤3：
创建ReactJS应用程序后，使用以下命令安装所需模块：

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

项目结构：

运行应用的步骤：
打开终端并输入以下命令。

npm start

示例1：
下面的示例演示了React MUI导航组件。

import React from "react"; 
import Link from '@mui/material/Link'; 
  
function App() { 
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: "green" }}> 
                    GeeksforGeeks 
                </h1> 
                <h2>React MUI Routing</h2> 
            </div> 
            <div style={{ width: "50%" }}> 
                <Link href= 
                    "https://www.geeksforgeeks.org"> 
                    Visit 
                </Link> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

示例2：
下面的示例演示了将React MUI导航操作作为按钮组件的示例。

import { Button } from "@mui/material"; 
import React from "react"; 
  
function App() { 
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: "green" }}> 
                    GeeksforGeeks 
                </h1> 
                <h2>React MUI Routing</h2> 
            </div> 
              
            <div style={{ width: "50%" }}> 
                <Button href="https://www.geeksforgeeks.org" variant="contained" color="inherit"> 
                    Click 
                </Button> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出:

参考：
https://mui.com/material-ui/guides/routing/