use react-router-dom Link components instead of material UIs

unstructuredstudio · Nov 12, 2023 · 7328e5e · 7328e5e
1 parent 7520ce0
commit 7328e5e
Showing 1 changed file with 5 additions and 6 deletions.
diff --git a/zubhub_frontend/zubhub/src/components/Sidenav/Sidenav.jsx b/zubhub_frontend/zubhub/src/components/Sidenav/Sidenav.jsx
@@ -1,6 +1,5 @@
 import {
   CircularProgress,
-  Link,
   List,
   ListItem,
   ListItemIcon,
@@ -12,7 +11,7 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useHistory, useLocation, Link } from 'react-router-dom';
 import API from '../../api';
 import { images } from '../../assets/images';
 import { logout } from '../../store/actions/authActions';
@@ -67,7 +66,7 @@ export default function Sidenav() {
     <div className={classes.container}>
       <List className={classes.listContainer}>
         {isSmallScreen && (
-          <Link className={clsx(classes.logo, classes.link)} href="/">
+          <Link className={clsx(classes.logo, classes.link)} to="/">
             <ListItem>
               <img alt="Zubhub Logo" src={images.logo} />
             </ListItem>
@@ -82,7 +81,7 @@ export default function Sidenav() {
                   <Link
                     key={index + label}
                     className={clsx(classes.label, classes.link, pathname === link && classes.active, red && classes.red)}
-                    href={link}
+                    to={link}
                     target={target || '_self'}
                   >
                     <ListItem key={label}>
@@ -114,7 +113,7 @@ export default function Sidenav() {
                   <Link
                     key={index + label}
                     className={clsx(classes.label, classes.link, pathname == link && classes.active, red && classes.red)}
-                    href={link}
+                    to={link}
                     target={target || '_self'}
                   >
                     <ListItem key={label}>
@@ -138,7 +137,7 @@ export default function Sidenav() {
                 key={index + label}
                 className={clsx(classes.label, classes.link, pathname == link && classes.active, red && classes.red)}
                 style={{ marginTop: index == 0 && 'auto' }}
-                {...(link && { href: link })}
+                {...(link && { to: link })}
                 onClick={action == 'logout' ? handleLogout : null}
               >
                 <ListItem key={label}>