Logic to force sidebar link update

frontend/components/Layout/components/SidebarCollection/SidebarCollection.js

@@ -20,18 +20,20 @@ class SidebarCollection extends React.Component {
   renderDocuments(documentList) {
     const { document } = this.props;
 
-    return documentList.map(doc => (
-      <Flex column key={doc.id}>
-        <SidebarLink key={doc.id} to={doc.url}>
-          {doc.title}
-        </SidebarLink>
-        {}
-        {(document.pathToDocument.includes(doc.id) || document.id === doc.id) &&
-          <Children>
-            {doc.children && this.renderDocuments(doc.children)}
-          </Children>}
-      </Flex>
-    ));
+    if (document) {
+      return documentList.map(doc => (
+        <Flex column key={doc.id}>
+          <SidebarLink key={doc.id} to={doc.url}>
+            {doc.title}
+          </SidebarLink>
+          {(document.pathToDocument.includes(doc.id) ||
+            document.id === doc.id) &&
+            <Children>
+              {doc.children && this.renderDocuments(doc.children)}
+            </Children>}
+        </Flex>
+      ));
+    }
   }
 
   render() {

frontend/components/Layout/components/SidebarLink/SidebarLink.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { observer } from 'mobx-react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, withRouter } from 'react-router-dom';
 import { Flex } from 'reflexbox';
 import styled from 'styled-components';
 
@@ -9,11 +9,20 @@ const activeStyle = {
   color: '#000000',
 };
 
-const SidebarLink = observer(props => (
-  <LinkContainer>
-    <NavLink {...props} activeStyle={activeStyle} />
-  </LinkContainer>
-));
+@observer class SidebarLink extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    // Navlink is having issues updating, forcing update on URL changes
+    return this.props.match !== nextProps.match;
+  }
+
+  render() {
+    return (
+      <LinkContainer>
+        <NavLink exact {...this.props} activeStyle={activeStyle} />
+      </LinkContainer>
+    );
+  }
+}
 
 const LinkContainer = styled(Flex)`
   padding: 5px 0;
@@ -23,4 +32,4 @@ const LinkContainer = styled(Flex)`
   }
 `;
 
-export default SidebarLink;
+export default withRouter(SidebarLink);