diff --git a/packages/remix-react/__tests__/transition-test.tsx b/packages/remix-react/__tests__/transition-test.tsx index a0b87ed0e3c..a331dc9406c 100644 --- a/packages/remix-react/__tests__/transition-test.tsx +++ b/packages/remix-react/__tests__/transition-test.tsx @@ -1,5 +1,5 @@ -import { Action, parsePath } from "history"; -import type { Location, State } from "history"; +import { NavigationType as Action, parsePath } from "react-router-dom"; +import type { Location } from "react-router-dom"; import type { Submission, TransitionManagerInit } from "../transition"; import { diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx index 22d85195ed2..2d66ebaa1b4 100644 --- a/packages/remix-react/browser.tsx +++ b/packages/remix-react/browser.tsx @@ -1,7 +1,5 @@ -// TODO: We eventually might not want to import anything directly from `history` -// and leverage `react-router` here instead -import type { BrowserHistory, Update } from "history"; -import { createBrowserHistory } from "history"; +import type { BrowserHistory, Action, Location } from "@remix-run/router"; +import { createBrowserHistory } from "@remix-run/router"; import type { ReactElement } from "react"; import * as React from "react"; @@ -19,6 +17,11 @@ declare global { export interface RemixBrowserProps {} +interface Update { + action: Action; + location: Location; +} + /** * The entry point for a Remix app when it is rendered in the browser (in * `app/entry.client.js`). This component is used by React to hydrate the HTML @@ -27,7 +30,7 @@ export interface RemixBrowserProps {} export function RemixBrowser(_props: RemixBrowserProps): ReactElement { let historyRef = React.useRef(); if (historyRef.current == null) { - historyRef.current = createBrowserHistory({ window }); + historyRef.current = createBrowserHistory({ window, v5Compat: true }); } let history = historyRef.current; diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx index 141d6cacbf1..bd1d22c7859 100644 --- a/packages/remix-react/components.tsx +++ b/packages/remix-react/components.tsx @@ -1,6 +1,3 @@ -// TODO: We eventually might not want to import anything directly from `history` -// and leverage `react-router` here instead -import type { Action, Location } from "history"; import type { FocusEventHandler, FormHTMLAttributes, @@ -8,11 +5,17 @@ import type { TouchEventHandler, } from "react"; import * as React from "react"; -import type { Navigator, Params } from "react-router"; +import type { + NavigationType as Action, + Location, + Navigator, + Params, +} from "react-router-dom"; import { Router, Link as RouterLink, NavLink as RouterNavLink, + createPath, useLocation, useRoutes, useNavigate, @@ -20,7 +23,6 @@ import { useResolvedPath, } from "react-router-dom"; import type { LinkProps, NavLinkProps } from "react-router-dom"; -import { createPath } from "history"; import type { SerializeFrom } from "@remix-run/server-runtime"; import type { AppData, FormEncType, FormMethod } from "./data"; diff --git a/packages/remix-react/errorBoundaries.tsx b/packages/remix-react/errorBoundaries.tsx index 81a905bc06f..33e7d90865b 100644 --- a/packages/remix-react/errorBoundaries.tsx +++ b/packages/remix-react/errorBoundaries.tsx @@ -1,7 +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 React, { useContext } from "react"; +import type { Location } from "react-router-dom"; import type { CatchBoundaryComponent, diff --git a/packages/remix-react/links.ts b/packages/remix-react/links.ts index f0105e2a519..c3db9b609b4 100644 --- a/packages/remix-react/links.ts +++ b/packages/remix-react/links.ts @@ -1,7 +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 { 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"; diff --git a/packages/remix-react/package.json b/packages/remix-react/package.json index 9b45fdedbb7..1d819689f1b 100644 --- a/packages/remix-react/package.json +++ b/packages/remix-react/package.json @@ -16,7 +16,7 @@ "typings": "dist/index.d.ts", "module": "dist/esm/index.js", "dependencies": { - "history": "^5.3.0", + "@remix-run/router": "1.0.4", "react-router-dom": "6.4.4" }, "devDependencies": { diff --git a/packages/remix-react/routeMatching.ts b/packages/remix-react/routeMatching.ts index 81efe7a79e5..6c515b05d09 100644 --- a/packages/remix-react/routeMatching.ts +++ b/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"; diff --git a/packages/remix-react/routeModules.ts b/packages/remix-react/routeModules.ts index 88ae3254e86..762a4d878d0 100644 --- a/packages/remix-react/routeModules.ts +++ b/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 { Params, Location } from "react-router-dom"; import type { AppData } from "./data"; import type { LinkDescriptor } from "./links"; diff --git a/packages/remix-react/server.tsx b/packages/remix-react/server.tsx index 7ef4b8dfdba..c37eeda4d68 100644 --- a/packages/remix-react/server.tsx +++ b/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 { NavigationType as Action, createPath } from "react-router-dom"; import { RemixEntry } from "./components"; import type { EntryContext } from "./entry"; diff --git a/packages/remix-react/transition.ts b/packages/remix-react/transition.ts index 9bafb79584b..31d8e64d13f 100644 --- a/packages/remix-react/transition.ts +++ b/packages/remix-react/transition.ts @@ -1,7 +1,5 @@ -// TODO: We eventually might not want to import anything directly from `history` -// and leverage `react-router` here instead -import { Action } from "history"; -import type { Location } from "history"; +import { NavigationType as Action } from "react-router-dom"; +import type { Location } from "react-router-dom"; import type { RouteData } from "./routeData"; import type { RouteMatch } from "./routeMatching"; diff --git a/packages/remix-server-runtime/routeModules.ts b/packages/remix-server-runtime/routeModules.ts index b398529634d..4aae88a154b 100644 --- a/packages/remix-server-runtime/routeModules.ts +++ b/packages/remix-server-runtime/routeModules.ts @@ -1,6 +1,5 @@ -import type { Params } from "@remix-run/router"; -import type { Location } from "history"; import type { ComponentType } from "react"; +import type { Location, Params } from "react-router-dom"; import type { AppLoadContext, AppData } from "./data"; import type { LinkDescriptor } from "./links"; diff --git a/yarn.lock b/yarn.lock index c453000953a..d46a603e328 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1186,7 +1186,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.10.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4": +"@babel/runtime@^7.10.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4": version "7.18.3" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz" integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug== @@ -6996,13 +6996,6 @@ headers-polyfill@^3.0.4: resolved "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-3.0.7.tgz" integrity sha512-JoLCAdCEab58+2/yEmSnOlficyHFpIl0XJqwu3l+Unkm1gXpFUYsThz6Yha3D6tNhocWkCPfyW0YVIGWFqTi7w== -history@^5.3.0: - version "5.3.0" - resolved "https://registry.npmjs.org/history/-/history-5.3.0.tgz" - integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ== - dependencies: - "@babel/runtime" "^7.7.6" - hosted-git-info@^2.1.4: version "2.8.9" resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz"