From 17e4eb0931a4c5117c8c2e0d55ba46caef0d1571 Mon Sep 17 00:00:00 2001
From: gift256 <giftnamulika@gmail.com>
Date: Thu, 26 Oct 2023 23:05:57 +0300
Subject: [PATCH] use react-router-dom Link components instead of material UIs

---
 .../zubhub/src/components/Sidenav/Sidenav.jsx            | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/zubhub_frontend/zubhub/src/components/Sidenav/Sidenav.jsx b/zubhub_frontend/zubhub/src/components/Sidenav/Sidenav.jsx
index 7b336fa40..d465687ab 100644
--- 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}>