import { createBrowserHistory } from 'history';

// Custom history component handles scroll position for back button, hashes,
// and normal links
const browserHistory = createBrowserHistory();
browserHistory.listen((location) => {
  setTimeout(() => {
    if (location.action === 'POP') {
      return;
    }
    const hash = window.location.hash;
    if (hash) {
      const element = document.getElementById(hash);
      if (element) {
        element.scrollIntoView({
          block: 'start',
          behavior: 'smooth'
        });
      }
    } else {
      window.scrollTo(0, 0);
    }
  });
});

export default browserHistory;

import { createBrowserHistory } from 'history';

// Custom history component handles scroll position for back button, hashes,
// and normal links
const browserHistory = createBrowserHistory();
browserHistory.listen((location) => {
  setTimeout(() => {
    if (location.action === 'POP') {
      return;
    }
    const hash = window.location.hash;
    if (hash) {
      const element = document.querySelector(hash);
      if (element) {
        element.scrollIntoView({
          block: 'start',
          behavior: 'smooth'
        });
      }
    } else {
      window.scrollTo(0, 0);
    }
  });
});

export default browserHistory;

--- 
+++ 
@@ -10,7 +10,7 @@
     }
     const hash = window.location.hash;
     if (hash) {
-      const element = document.getElementById(hash);
+      const element = document.querySelector(hash);
       if (element) {
         element.scrollIntoView({
           block: 'start',
Fix benign JS error from clicking reference links in ArticleViewer

Some footnote anchors have valid IDs but not valid CSS selectors, so they would cause errors with document.querySelector().

https://stackoverflow.com/a/37271406/4957673
