title: Material UI+ React - How to link a component to perform navigation
body: <p>I'm using the Drawer Component in MUI v.5 to create a responsive navigation bar. However, I don't know how to link and perform another page after clicking on them (for example after clicking on the &quot;About&quot; button on the navbar, it will be directed to about.js.)
  I would really appreciate your help!</p>
  <p>I created a DrawerComp.js for responsive navbar
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//DrawerComp.js
          import React, { useState} from 'react'
          import {Drawer, IconButton, List, ListItemButton, ListItemIcon, ListItemText} from '@mui/material';
          import MenuIcon from '@mui/icons-material/Menu';
      
          const PAGES = ["About", "Socials"]
          const DrawerComp =()=&gt;{
      
              const [openDrawer, setOpenDrawer]=useState(false);
              return (
                  &lt;React.Fragment&gt;
                      &lt;Drawer PaperProps={{sx:{ width:240}}} open={openDrawer} onClose={()=&gt;setOpenDrawer(false)}&gt;
                      &lt;List&gt;
                          {
                              PAGES.map((page,index)=&gt;(
                                  &lt;ListItemButton onClick={()=&gt; setOpenDrawer(false)} key={index}&gt;
                                  &lt;ListItemIcon&gt;
                                      &lt;ListItemText&gt;
                                      {page}
                                      &lt;/ListItemText&gt;
                                  &lt;/ListItemIcon&gt;
                              &lt;/ListItemButton&gt;
                              ))
                          }
                         
                      &lt;/List&gt;
                      &lt;/Drawer&gt;
                      &lt;IconButton onClick={()=&gt;setOpenDrawer(!openDrawer)} &gt; &lt;MenuIcon/&gt;&lt;/IconButton&gt;
                     
                     
                  &lt;/React.Fragment&gt;
              );
          };
      
          export default DrawerComp;</code></pre>
  </div>
  </div>
  </p>
  <p>and here is what I have on navbar.js
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> //navbar.js
          import { AppBar, Toolbar, IconButton, Typography, Stack, Button,Box, useMediaQuery, useTheme, Tabs, Tab } from "@mui/material"
      
          import { useSession, signIn, signOut } from 'next-auth/react';
          import React, { useState, useEffect } from "react";
          import DrawerComp from "./DrawerComp";
      
      
          const PAGES = ["About", "Socials"];
          const Navbar = (props) =&gt; {
              const { data: session, status } = useSession();
              const [value, setValue] = useState();
              const theme = useTheme();
              const isMatch = useMediaQuery(theme.breakpoints.down('md'));
      
              return (
                  &lt;React.Fragment&gt;
                  &lt;AppBar position='static'&gt;
                      &lt;Toolbar&gt;
                          
                          {
                              isMatch ?(
                                  &lt;&gt;
                                  &lt;DrawerComp sx={{marginLeft: 4}}/&gt;
                                   &lt;Box component="img" sx={{ height: 50, width: 50, mx:"auto"}}  alt='my_img' src='/static/images/my_img.png' /&gt;
                                   
                                  &lt;/&gt;
                              ) : (
                                  &lt;&gt;
                                 
                              &lt;Tabs  textColor='#000' &gt;
                                  {
                                      PAGES.map((page,index) =&gt; (
                                          &lt;Tab  key={index} label={page}&gt;&lt;/Tab&gt;
                                      ))
                                  }
                              
                          &lt;/Tabs&gt;
      
      
                                  &lt;/&gt;
                              )
                          }
      
                         
                      &lt;/Toolbar&gt;
                      
                  &lt;/AppBar&gt;
                  &lt;/React.Fragment&gt;
              )
          }
      
          export default Navbar;</code></pre>
  </div>
  </div>
  </p>