using React router with history.js via CDN

Question

I'm working on a project that is using react added into a static HTML page, but I can't get react router to work properly. I keep getting the following error from HashRouter:

index.tsx:177 Uncaught TypeError: Cannot read properties of undefined (reading 'createHashHistory')

Here are the CDN links I'm using for my project:

<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/6.2.1/react-router.development.js" integrity="sha512-x/vwJ8OCwhBaXS1SCWX2WiYvvIO6RKbMMn/ZlRP4CPhpM7SnaladKEnQgcejrA7Ep0RDMaxjB98VvOOlDuhm9Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/6.2.1/react-router-dom.development.js" integrity="sha512-uAx4/XQlub/EIs2IQ1Tq/kgkJF+GRNTocKZBDSSTSBjCZmfkvCUIQ+D9QoWlXXvgEkBCbGAaj7Ay+o/3EM9uuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/history/5.2.0/history.development.js" integrity="sha512-He5zdxgskQISMuGJzMzSF7ndvQ2L9ffBpA9tkBIJwTTFnp2bBUVhND8JLvbLxGcLa5ul7wB/VijK7Lw4gkWMjA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

My router imports in my App component:

// Router
const Router = ReactRouterDOM.HashRouter;
const { createHashHistory } = history;
const Route = ReactRouterDOM.Route;
const Link = ReactRouterDOM.Link;

Router wrapped around my component:

<Router history={createHashHistory}>
  <MyAccount customerInfo={customerInfo}/>
</Router>

EDIT: Additional info about the HashRouter exception:

Seems to crash on this line: historyRef.current = createHashHistory({ window });

export function HashRouter({ basename, children, window }: HashRouterProps) {
  let historyRef = React.useRef<HashHistory>();
  if (historyRef.current == null) {
    historyRef.current = createHashHistory({ window });
  }

Any help is greatly appreciated, I can't find much info on getting this type of setup to work.

Answer 1

Ok, looks like latest available for you on cdnjs is v5.1.0 (https://github.com/cdnjs/cdnjs/tree/master/ajax/libs/history).

Try switching to v5.1.0 from v5.2.0:

<script src="https://cdnjs.cloudflare.com/ajax/libs/history/5.1.0/history.development.js" integrity="sha512-..." ...></script>

To address my first comment regarding the router see my answer here for creating a custom hash router.

// Router
const Router = ReactRouterDOM.Router; // <-- low-level router!!
const { createHashHistory } = history;
const Route = ReactRouterDOM.Route;
const Link = ReactRouterDOM.Link;

const CustomRouter = ({ history, ...props }) => {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });

  useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      {...props}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};

...

const history = createHashHistory();

...

<CustomRouter history={createHashHistory}>
  <MyAccount customerInfo={customerInfo}/>
</CustomRouter>