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" }}> neveropen </h1> <h2>React MUI Routing</h2> </div> <div style={{ width: "50%" }}> <Link href= 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" }}> neveropen </h1> <h2>React MUI Routing</h2> </div> <div style={{ width: "50%" }}> <Button href= variant="contained" color="inherit"> Click </Button> </div> </center> ); } export default App; |
Output:
Reference: https://mui.com/material-ui/guides/routing/
