refactor: use react-router-dom import instead of history or `reac…

…t-router` where possible

packages/remix-react/__tests__/transition-test.tsx

@@ -1878,10 +1878,6 @@ describe("navigating with inflight fetchers", () => {
   });
 });
 
-// describe("react-router", () => {
-//   it.todo("replaces pending locations even on a push");
-// });
-
 ////////////////////////////////////////////////////////////////////////////////
 type Deferred = ReturnType<typeof defer>;
 

packages/remix-react/browser.tsx

@@ -1,5 +1,5 @@
 // TODO: We eventually might not want to import anything directly from `history`
-// and leverage `react-router` here instead
+// and leverage `react-router-dom` here instead
 import type { BrowserHistory, Update } from "history";
 import { createBrowserHistory } from "history";
 import type { ReactElement } from "react";

packages/remix-react/components.tsx

@@ -1,14 +1,20 @@
 // TODO: We eventually might not want to import anything directly from `history`
-// and leverage `react-router` here instead
-import type { Action, Location } from "history";
+// and leverage `react-router-dom` here instead
+import type { Action } from "history";
 import type {
   FocusEventHandler,
   FormHTMLAttributes,
   MouseEventHandler,
   TouchEventHandler,
 } from "react";
 import * as React from "react";
-import type { Navigator, Params } from "react-router";
+import type {
+  LinkProps,
+  Location,
+  NavLinkProps,
+  Navigator,
+  Params,
+} from "react-router-dom";
 import {
   Router,
   Link as RouterLink,
@@ -19,7 +25,6 @@ import {
   useHref,
   useResolvedPath,
 } from "react-router-dom";
-import type { LinkProps, NavLinkProps } from "react-router-dom";
 import type { Merge } from "type-fest";
 
 import type { AppData, FormEncType, FormMethod } from "./data";

packages/remix-react/errorBoundaries.tsx

@@ -1,6 +1,4 @@
-// TODO: We eventually might not want to import anything directly from `history`
-// and leverage `react-router` here instead
-import type { Location } from "history";
+import type { Location } from "react-router-dom";
 import React, { useContext } from "react";
 
 import type {

packages/remix-react/links.ts

@@ -1,14 +1,11 @@
-// TODO: We eventually might not want to import anything directly from `history`
-// and leverage `react-router` here instead
-import type { Location } from "history";
-import { parsePath } from "history";
+import type { Location } from "react-router-dom";
+import { parsePath } from "react-router-dom";
 
 import type { AssetsManifest } from "./entry";
-import type { ClientRoute } from "./routes";
 import type { RouteMatch } from "./routeMatching";
-// import { matchClientRoutes } from "./routeMatching";
-import type { RouteModules, RouteModule } from "./routeModules";
+import type { RouteModule, RouteModules } from "./routeModules";
 import { loadRouteModule } from "./routeModules";
+import type { ClientRoute } from "./routes";
 
 type Primitive = null | undefined | string | number | boolean | symbol | bigint;
 

packages/remix-react/routeMatching.ts

@@ -1,7 +1,4 @@
-// TODO: We eventually might not want to import anything directly from `history`
-// and leverage `react-router` here instead
-import type { Location } from "history";
-import type { Params, RouteObject } from "react-router"; // TODO: export/import from react-router-dom
+import type { Location, Params, RouteObject } from "react-router-dom";
 import { matchRoutes } from "react-router-dom";
 
 import type { ClientRoute } from "./routes";

packages/remix-react/routeModules.ts

@@ -1,8 +1,5 @@
-// TODO: We eventually might not want to import anything directly from `history`
-// and leverage `react-router` here instead
-import type { Location } from "history";
 import type { ComponentType } from "react";
-import type { Params } from "react-router"; // TODO: import/export from react-router-dom
+import type { Location, Params } from "react-router-dom";
 
 import type { AppData } from "./data";
 import type { LinkDescriptor } from "./links";

packages/remix-react/routes.tsx

@@ -1,6 +1,6 @@
 import type { ComponentType, ReactNode } from "react";
 import * as React from "react";
-import type { Params } from "react-router";
+import type { Params } from "react-router-dom";
 
 import type { RouteModules, ShouldReloadFunction } from "./routeModules";
 import { loadRouteModule } from "./routeModules";

packages/remix-react/server.tsx

@@ -1,9 +1,7 @@
-// TODO: We eventually might not want to import anything directly from `history`
-// and leverage `react-router` here instead
-import type { Location, To } from "history";
 import { Action, createPath } from "history";
 import type { ReactElement } from "react";
 import * as React from "react";
+import type { Location, To } from "react-router-dom";
 
 import { RemixEntry } from "./components";
 import type { EntryContext } from "./entry";

packages/remix-react/transition.ts

@@ -1,7 +1,7 @@
 // TODO: We eventually might not want to import anything directly from `history`
-// and leverage `react-router` here instead
+// and leverage `react-router-dom` here instead
 import { Action } from "history";
-import type { Location } from "history";
+import type { Location } from "react-router-dom";
 
 import type { RouteData } from "./routeData";
 import type { RouteMatch } from "./routeMatching";

packages/remix-server-runtime/routeMatching.ts

@@ -1,4 +1,4 @@
-import type { Params, RouteObject } from "react-router"; // TODO: export/import from react-router-dom
+import type { Params, RouteObject } from "react-router-dom";
 import { matchRoutes } from "react-router-dom";
 
 import type { ServerRoute } from "./routes";