change: from div to react link component (#12813)

Signed-off-by: Michael Fresco <[email protected]>

src/components/nav-bar/nav-bar.tsx

@@ -1,6 +1,7 @@
 import {default as classNames} from 'classnames';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
+import {Link} from 'react-router-dom'; // Import Link component
 
 import { AppContext } from '../../context';
 import {Tooltip} from '../tooltip/tooltip';
@@ -35,10 +36,9 @@ export const NavBar: React.FunctionComponent<NavBarProps> = (props: NavBarProps,
                 <div className='nav-bar__version'>{props.version && props.version()}</div>
                 {(props.items || []).map((item) => (
                     <Tooltip content={item.title} placement='right' arrow={true} key={item.path + item.title}>
-                        <div className={classNames('nav-bar__item', { active: isActiveRoute(locationPath, item.path) })}
-                            onClick={() => context.router.history.push(item.path)} role="checkbox">
-                            <i className={item.iconClassName}/>
-                        </div>
+                        <Link to={item.path} className={classNames('nav-bar__item', { active: isActiveRoute(locationPath, item.path) })}>
+                            <i className={item.iconClassName} />
+                        </Link>
                     </Tooltip>
                 ))}
             </div>