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

unstructuredstudio · Oct 26, 2023 · 17e4eb0 · 17e4eb0
1 parent d244e10
commit 17e4eb0
Showing 1 changed file with 4 additions and 5 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';
@@ -56,7 +55,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>
@@ -69,7 +68,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}>
@@ -89,7 +88,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}>