Use-hash-history NPM

Use Hash History

This package is a workaround to history Issue #912.

Here is a live demo on CodeSandbox, and here is a minimal template of the below example.

Installation and Example

To install along with react-router-dom@6.2.1, run:

pnpm add use-hash-history react-router-dom@6.2.1

Or, run npm install or yarn add, based on your package manager. To avoid duplicate dependencies, also install the peer dependency history to match the version used by react-router-dom.

Use with a version of react-router-dom from 6.1.1 to 6.2.1 as follows:

import * as React from "react";
import { useHashHistory } from "use-hash-history";
import { Routes, Route, Link } from "react-router-dom";
import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";

const Example = ({ hashRoot = "" }) => {
  const history = useHashHistory({ hashRoot });
  return (
    <HistoryRouter history={history}>
      <Link to="/home">Go to #{hashRoot}home</Link>
      <Routes>
        <Route path="home" element={<> here!</>} />;
        <Route path="*" element={<>...</>} />;
      </Routes>
    </HistoryRouter>
  );
};

Using the above Example, you can actually resurrect the lost hashType feature of react-router-dom@5 (and history@4) with the following HashTypeExample component that handles the old hashType:

const HashTypeExample = ({ hashType }) => {
  const hashRoot = {
    slash: "/",
    noslash: "",
    hashbang: "!/",
  }[hashType];

  return <Example hashRoot={hashRoot}>
}