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 183b10fc5ea..3cba36dc2cf 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 9605ac40a05..fc7f51ba696 100644 --- a/packages/remix-react/package.json +++ b/packages/remix-react/package.json @@ -16,8 +16,8 @@ "typings": "dist/index.d.ts", "module": "dist/esm/index.js", "dependencies": { - "history": "^5.3.0", - "react-router-dom": "~6.4.3" + "@remix-run/router": "1.0.4-pre.0", + "react-router-dom": "6.4.4-pre.1" }, "devDependencies": { "@remix-run/server-runtime": "1.7.6", 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 ffc05877eab..7d82deeeaf8 100644 --- a/packages/remix-server-runtime/routeModules.ts +++ b/packages/remix-server-runtime/routeModules.ts @@ -1,5 +1,5 @@ -import type { Location } from "history"; import type { ComponentType } from "react"; +import type { Location } from "react-router-dom"; import type { AppLoadContext, AppData } from "./data"; import type { LinkDescriptor } from "./links"; diff --git a/yarn.lock b/yarn.lock index b44f61e307e..58146e2d462 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1342,7 +1342,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== @@ -2257,10 +2257,10 @@ "@changesets/types" "^5.0.0" dotenv "^8.1.0" -"@remix-run/router@1.0.3": - version "1.0.3" - resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz#953b88c20ea00d0eddaffdc1b115c08474aa295d" - integrity sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q== +"@remix-run/router@1.0.4-pre.0": + version "1.0.4-pre.0" + resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4-pre.0.tgz#51b84d14d21358bea76da373dae935b19fa2f830" + integrity sha512-gKzu5SESxxEwzLTi1J9V5akGwmy6ePkuauZQg5r/tgb/iMryCzkIVwXCMtWnDOMfYUHutPhvdmCrk7YWWw5q8Q== "@remix-run/web-blob@^3.0.3", "@remix-run/web-blob@^3.0.4": version "3.0.4" @@ -7037,13 +7037,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" @@ -10740,20 +10733,20 @@ react-is@^17.0.1: resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== -react-router-dom@~6.4.3: - version "6.4.3" - resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz#70093b5f65f85f1df9e5d4182eb7ff3a08299275" - integrity sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ== +react-router-dom@6.4.4-pre.1: + version "6.4.4-pre.1" + resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4-pre.1.tgz#398bb586a5c15b81361f00c76e844e7e9d6e68ce" + integrity sha512-SIc1U8L72YZ2iPQzLKDcJAB4j8cCZugjq5mg/psyhIEapf35Ipv9oU5jrvewctyB2cZdrRXfLcsykXsDFKVnWQ== dependencies: - "@remix-run/router" "1.0.3" - react-router "6.4.3" + "@remix-run/router" "1.0.4-pre.0" + react-router "6.4.4-pre.1" -react-router@6.4.3: - version "6.4.3" - resolved "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz#9ed3ee4d6e95889e9b075a5d63e29acc7def0d49" - integrity sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA== +react-router@6.4.4-pre.1: + version "6.4.4-pre.1" + resolved "https://registry.npmjs.org/react-router/-/react-router-6.4.4-pre.1.tgz#7b9ab4c20ed0062d4ef4ccb10f883368fa8b295d" + integrity sha512-cnOKLGW0tWI+qRmC2TpsrCjxUxN23tBkEv9Qu3WKP5owkWRgAPzt0+k/ElKJHsYVYlXDUodm2Fe8zUkLQqfKQQ== dependencies: - "@remix-run/router" "1.0.3" + "@remix-run/router" "1.0.4-pre.0" react@^18.2.0: version "18.2.0"