Error using unstable_HistoryRouter with react-router-dom "^6.3.0",

[Difenter]

Problem Description
We encountered a TypeScript error related to the history package version incompatibility with the React Router. Specifically:

Type 'BrowserHistory' is missing the following properties from type 'History': createURL, encodeLocation

This error occurs because we are using an old version of history (v5) with a newer version of React Router (v6.3+), which has an unstable API and uses a different internal history implementation.

Solution
Current Workaround:

To address this issue, we added // @ts-expect-error to suppress the TypeScript error for the unstable API:

ReactClient.createRoot(document.getElementById("root")).render(
  // @ts-expect-error
  <unstable_HistoryRouter history={history}>...</unstable_HistoryRouter>
);

Alternative Solutions:

a. Use the New History Implementation:

We can leverage the new history implementation compatible with React Router v6.3+, though it has some differences from v5 (e.g., no blocking, no back/forward - just go). Example usage:

import { createBrowserHistory } from "@remix-run/router";

const history = createBrowserHistory({ v5Compat: true });

b. Upgrade to the New Router Version:

Another option is to upgrade to the latest version of React Router. However, this would require significant changes to the codebase, as nearly all instances of the old router would need to be replaced with the new implementation.

Link: remix-run/react-router#9630