React MUI Links Navigation

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.

React MUI Links Navigation allows us to customize the anchor elements of navigation with our custom theme colors or typography styles.

Links Navigation variants:

• Basic Links: The basic link component is built using Typography which means that we can use its props.
• Underline: The underline prop is used to set the underline behavior.
• Security: For security in link navigation, use rel=”noopener” or rel=”noreferrer” when linking to third-party content. 
• Third-party routing library: The Link component provides the component prop to handle the navigation on the client only.
• Accessibility: Use the keyboard and screen reader accessibility for better accessibility.
• API: The <Link/> API is used in link navigation.

Syntax:

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

Creating React Project:

Step 1: To create a react app, you need to 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 basic link navigation.

Javascript

import { Link } from "@mui/material";
import { Stack } from "@mui/system";
import React from "react";

function App() {
    return (
        <center>
            <div>
                <h1 style={{ color: 'green' }}>
                    GeeksforGeeks</h1>
                <h2>React MUI Links Navigation</h2>
            </div>
            <div>
                <Stack spacing={1} direction="row"
                    justifyContent="center">
                    <Link href="##">Home</Link>
                    <Link href="##">Practice</Link>
                    <Link href="##">Tutorials</Link>
                    <Link href="##">GBlog</Link>
                </Stack>
            </div>
        </center>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI underline link navigation.

Javascript

import { Link } from "@mui/material";
import { Stack } from "@mui/system";
import React from "react";

function App() {
    return (
        <center>
            <div>
                <h1 style={{ color: 'green' }}>
                    GeeksforGeeks</h1>
                <h2>React MUI Links Navigation</h2>
            </div>
            <div>
                <Stack spacing={1} direction="row" j
                    ustifyContent="center">
                    <Link href="##" underline="hover">
                        Home</Link>
                    <Link href="##" underline="none">
                        Practice</Link>
                    <Link href="##" underline="always">
                        Tutorials</Link>
                </Stack>
            </div>
        </center>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/react-link/