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组件。
组件属性： 借助组件属性，我们可以轻松地集成第三方库。链接、按钮、列表和选项卡是一些示例。
更多示例： 要在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

项目结构：

React MUI路由

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

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;

输出：

React MUI路由

示例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;

输出:

React MUI路由