History Router Test Template

This template tests the new HistoryRouter API of react-router-dom. This is also a response to issue #912 of history and a related issue with React Router v6. Here is a live demo on CodeSandbox.

Installation and Example

Besides react and vite, the main dependencies to install with pnpm, npm, or yarn are:

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

In src/app.tsx, you'll find the core of this template here:

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 App = ({ 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>
  );
};

The HistoryRouter allows the use of a custom HashHistory to store paths in the url after # instead of #/, among other possibilities.

...Why?

This template uses a new package called use-hash-history, which is a Proxy for history in react-router-dom after 6.1.1. This can be done thanks to an unstable version of a HistoryRouter API.

This replaces a feature that react-router-dom@6 lost in the upgrade from history@4 to history@5. Basically, this restores the ability to have a hash in the URL of #something instead of #/something. First, @tannera noticed the issue in Nov 2020. In Dec 2021, I proposed the reintroduction of the feature, and made three attempts to add it: 1, 2, 3.

Ultimately, I settled on maintaining the use-hash-history as a Proxy around history@5. It works with react-router-dom from 6.1.1 to 6.2.1, and I plan to maintain this project for longterm compatibility with React Router going forward. If history PR #911 were merged into history, this package would still be useful for its hashSlash parameter.

...for more details.

Contributing

The published copy lives at use-hash-history. Make any pull request against the main branch.

Getting started

Please fork this template, and clone the Repository:

git clone git@github.com:thejohnhoffer/test-history-router.git

You'll need to install node and a package manager:

• Install with pnpm install, run Vite locally with pnpm demo and build with pnpm build.
• Install with yarn install, run Vite locally with yarn demo and build with yarn build.
• Install with npm install, run Vite locally with npm run demo and build with npm run build.