diff --git a/src/common/NavBar/NavBarButton/NavBarButton.js b/src/common/NavBar/NavBarButton/NavBarButton.js
index a56af9f8c..2a16557a4 100644
--- a/src/common/NavBar/NavBarButton/NavBarButton.js
+++ b/src/common/NavBar/NavBarButton/NavBarButton.js
@@ -6,7 +6,16 @@ const styles = require('./styles');
 
 const NavBarButton = ({ className, icon, label, href, onClick }) => {
     const type = typeof onClick === 'function' ? 'button' : 'link';
-    const active = window.location.hash === href;
+    const [active, setActive] = React.useState(window.location.hash === href);
+    const onHashChanged = React.useCallback(() => {
+        setActive(window.location.hash === href);
+    }, [href]);
+    React.useEffect(() => {
+        window.addEventListener('hashchange', onHashChanged);
+        return () => {
+            window.removeEventListener('hashchange', onHashChanged);
+        };
+    }, []);
     return (
         <Input className={classnames(className, styles['button'], { 'active': active })} type={type} href={href} onClick={onClick}>
             <Icon className={styles['icon']} icon={icon} />