React MUI Routing

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Routing. React MUI provides a powerful set of components to help you create a consistent and professional user interface in your React applications. With MUI, you can easily integrate React Router with your Material-UI components. It uses the <Link> component that helps in navigating between different screens. 

Routing Contents:

• Navigation components: To perform navigation, we have two main components i.e, one is the Link that renders a native <a> element and applies the href as an attribute and the second is the navigation action like button component, etc.
• Global theme Link: Improve the user experience by using an enhanced Link component systematically and make a global theme Link component.
• component prop: With the help of component prop, we can easily integrate third-party libraries. Links, Buttons, Lists, and Tabs are some examples. 
• More examples:  To add routing in react app, Next.js and Gatsby are also an option that uses the Link component.

Syntax:

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

Creating React Project:

Step 1: To create a react app, install react modules through the npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

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

Project Structure:

Step to Run Application: Open the terminal and type the following command.

npm start

Example 1: Below example demonstrates the React MUI navigation component.

Javascript

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;

Output:

Example 2: Below example demonstrates the React MUI navigation action as a button component.

Javascript

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;

Output:

Reference: https://mui.com/material-ui/guides/routing/