Route for NavBar.

src/components/AuthUser/Dashboard/HomePage/NavBar.tsx

@@ -4,6 +4,8 @@ import { Tabs, Tab } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
 import ImportContactsIcon from '@material-ui/icons/ImportContacts';
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import { AuthRoutes } from 'api/routes';
+import { useHistory } from 'react-router-dom';
 
 const useStyles = makeStyles(() => ({
   tabs: {
@@ -29,15 +31,17 @@ const useStyles = makeStyles(() => ({
 }));
 
 export const NavBar: FC = () => {
+  const history = useHistory();
   const classes = useStyles();
 
-  const [value, setValue] = React.useState(0);
+  const [value, setValue] = React.useState<string>('');
 
   const handleChange = (
     event: React.ChangeEvent<unknown>,
-    newValue: number,
+    newValue: string,
   ): void => {
     setValue(newValue);
+    history.replace(newValue);
   };
 
   return (
@@ -51,16 +55,19 @@ export const NavBar: FC = () => {
     >
       <Tab
         label="HomePage"
+        value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
         icon={<HomeIcon className={classes.tabIcon} />}
         className={classes.tabPan}
       />
       <Tab
         label="Reservation"
+        value={`${AuthRoutes.dashboard}${AuthRoutes.reservation}`}
         icon={<ImportContactsIcon className={classes.tabIcon} />}
         className={`${classes.tabPan} ${classes.rightAlign}`}
       />
       <Tab
         label="Profile"
+        value={`${AuthRoutes.dashboard}${AuthRoutes.profile}`}
         className={classes.tabPan}
         icon={<AccountCircleIcon className={classes.tabIcon} />}
       />