[v6] Add <HistoryRouter> for standalone history objects (#7586)

Co-authored-by: Tim Dorr <[email protected]>

Author: salvoravida

packages/react-router-dom/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { BrowserHistory, HashHistory } from "history";
+import type { BrowserHistory, HashHistory, History } from "history";
 import { createBrowserHistory, createHashHistory, createPath } from "history";
 import {
   MemoryRouter,
@@ -194,6 +194,39 @@ export function HashRouter({ basename, children, window }: HashRouterProps) {
   );
 }
 
+export interface HistoryRouterProps {
+  basename?: string;
+  children?: React.ReactNode;
+  history: History;
+}
+
+export function HistoryRouter({
+  basename,
+  children,
+  history
+}: HistoryRouterProps) {
+  const [state, setState] = React.useState({
+    action: history.action,
+    location: history.location
+  });
+
+  React.useLayoutEffect(() => history.listen(setState), [history]);
+
+  return (
+    <Router
+      basename={basename}
+      children={children}
+      location={state.location}
+      navigationType={state.action}
+      navigator={history}
+    />
+  );
+}
+
+if (__DEV__) {
+  HistoryRouter.displayName = "HistoryRouter";
+}
+
 function isModifiedEvent(event: React.MouseEvent) {
   return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
 }