From bfcac9158ccf86effd118c3bb1688f1bc0c8358f Mon Sep 17 00:00:00 2001
From: auto200 <49625375+auto200@users.noreply.github.com>
Date: Mon, 29 Jan 2024 12:38:33 +0100
Subject: [PATCH] fix: use Link component from react router instead of default
 one

style button based on current path
---
 example/src/layout/Header.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/example/src/layout/Header.tsx b/example/src/layout/Header.tsx
index 5d758f2..04c0938 100644
--- a/example/src/layout/Header.tsx
+++ b/example/src/layout/Header.tsx
@@ -6,10 +6,13 @@ import {
   ListItemButton,
   ListItemText
 } from '@mui/material'
+import { Link, useLocation } from 'react-router-dom'
 
 const drawerWidth: number = 270
 
 function Header() {
+  const { pathname } = useLocation()
+
   return (
     <Drawer
       variant='permanent'
@@ -26,7 +29,11 @@ function Header() {
       <List>
         {routes.map(({ path, name }, index) => (
           <ListItem key={index} disablePadding>
-            <ListItemButton component='a' href={path}>
+            <ListItemButton
+              component={Link}
+              to={path}
+              selected={pathname === path}
+            >
               <ListItemText primary={name} />
             </ListItemButton>
           </ListItem>