Updated Navlink

src/components/navItem/NavContext.tsx

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import { NavLink } from 'react-router-dom';
+
+const NavContext = createContext<typeof NavLink>(NavLink);
+
+export default NavContext;

src/components/sideNavbar/components/NavItem.tsx → src/components/navItem/NavItem.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Nav from 'react-bootstrap/Nav';
-import { NavLink } from 'react-router-dom';
+// import { NavLink as RouterNavLink } from 'react-router-dom';
+import NavContext from './NavContext';
 
 export interface NavItemProps {
   route: string;
@@ -9,6 +10,7 @@ export interface NavItemProps {
 }
 
 const NavItem = ({ route, label, icon }: NavItemProps) => {
+  const NavLink = useContext(NavContext);
   const linkClass = (isActive: boolean): string => {
     return isActive ? 'nav-link active' : 'nav-link link-dark';
   };

src/components/sideNavbar/SideNavBar.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import Nav from '../nav/Nav';
-import NavItem from './components/NavItem';
 
 export interface SideNavbarProps extends React.HTMLProps<HTMLDivElement> {}
 
@@ -15,6 +14,4 @@ const SideNavbar = ({ className, children, ...rest }: SideNavbarProps) => {
   );
 };
 
-SideNavbar.Item = NavItem;
-
 export default SideNavbar;

src/index.ts

@@ -15,6 +15,8 @@ import Footer from './components/footer/Footer';
 import SearchBar from './components/searchBar/SearchBar';
 import Breadcrumb from './components/breadcrumb/Breadcrumb';
 import FilterButton from './components/filterButton/FilterButton';
+import NavItem from './components/navItem/NavItem';
+import NavContext from 'components/navItem/NavContext';
 import '../scss/texmo-react-components.scss';
 
 export {
@@ -35,4 +37,6 @@ export {
   SearchBar,
   Breadcrumb,
   FilterButton,
+  NavItem,
+  NavContext,
 };