diff --git a/.changeset/early-camels-guess.md b/.changeset/early-camels-guess.md new file mode 100644 index 00000000000..b9ca8b72126 --- /dev/null +++ b/.changeset/early-camels-guess.md @@ -0,0 +1,5 @@ +--- +"@remix-run/react": patch +--- + +Update `@remix-run/react` to use `Router` from `react-router-dom@6.4.4` 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 d953f5172b2..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"; @@ -239,6 +241,12 @@ function Routes() { // need this component, we can just `renderMatches` from RemixEntry let { clientRoutes } = useRemixEntryContext(); // fallback to the root if we don't have a match + + // TODO: clientRoutes currently errors here since RR 6.4 dropped `signal` as a + // loader argument. But since we're just using we aren't using any + // loaders in RR so this isn't an issue. We'll get these typings straightened + // out as part of the rendering work. + // @ts-expect-error let element = useRoutes(clientRoutes) || (clientRoutes[0].element as any); return element; } 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 726d9cbdb55..1d819689f1b 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.3.0" + "@remix-run/router": "1.0.4", + "react-router-dom": "6.4.4" }, "devDependencies": { "@remix-run/server-runtime": "1.8.0", 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/package.json b/packages/remix-server-runtime/package.json index 258cf9c2b06..15849d33e7d 100644 --- a/packages/remix-server-runtime/package.json +++ b/packages/remix-server-runtime/package.json @@ -20,7 +20,6 @@ "@types/cookie": "^0.4.0", "@web3-storage/multipart-parser": "^1.0.0", "cookie": "^0.4.1", - "react-router-dom": "6.3.0", "set-cookie-parser": "^2.4.8", "source-map": "^0.7.3" }, diff --git a/packages/remix-server-runtime/routeMatching.ts b/packages/remix-server-runtime/routeMatching.ts index 4373fd6f012..54a4c5265c8 100644 --- a/packages/remix-server-runtime/routeMatching.ts +++ b/packages/remix-server-runtime/routeMatching.ts @@ -1,5 +1,5 @@ -import type { Params, RouteObject } from "react-router"; // TODO: export/import from react-router-dom -import { matchRoutes } from "react-router-dom"; +import type { Params, AgnosticRouteObject } from "@remix-run/router"; +import { matchRoutes } from "@remix-run/router"; import type { ServerRoute } from "./routes"; @@ -13,7 +13,10 @@ export function matchServerRoutes( routes: ServerRoute[], pathname: string ): RouteMatch[] | null { - let matches = matchRoutes(routes as unknown as RouteObject[], pathname); + let matches = matchRoutes( + routes as unknown as AgnosticRouteObject[], + pathname + ); if (!matches) return null; return matches.map((match) => ({ diff --git a/packages/remix-server-runtime/routeModules.ts b/packages/remix-server-runtime/routeModules.ts index 813685729f3..4aae88a154b 100644 --- a/packages/remix-server-runtime/routeModules.ts +++ b/packages/remix-server-runtime/routeModules.ts @@ -1,6 +1,5 @@ -import type { Location } from "history"; import type { ComponentType } from "react"; -import type { Params } from "react-router-dom"; +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 cab4ead535b..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.2.0, 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" @@ -10737,20 +10730,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.3.0: - version "6.3.0" - resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz" - integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw== +react-router-dom@6.4.4: + version "6.4.4" + resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4.tgz#4271ec66333c440d1754477e4e6a3a5acb5487f8" + integrity sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA== dependencies: - history "^5.2.0" - react-router "6.3.0" + "@remix-run/router" "1.0.4" + react-router "6.4.4" -react-router@6.3.0: - version "6.3.0" - resolved "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz" - integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ== +react-router@6.4.4: + version "6.4.4" + resolved "https://registry.npmjs.org/react-router/-/react-router-6.4.4.tgz#8e7794f55ccc7050cb03937c87ff3720ce9f8b60" + integrity sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q== dependencies: - history "^5.2.0" + "@remix-run/router" "1.0.4" react@^18.2.0: version "18.2.0"