diff --git a/packages/react-router/__tests__/useResolvedPath-test.tsx b/packages/react-router/__tests__/useResolvedPath-test.tsx index a07201f7b4..b4f3d70ae2 100644 --- a/packages/react-router/__tests__/useResolvedPath-test.tsx +++ b/packages/react-router/__tests__/useResolvedPath-test.tsx @@ -1,7 +1,16 @@ import * as React from "react"; import * as TestRenderer from "react-test-renderer"; import type { Path } from "react-router"; -import { MemoryRouter, Routes, Route, useResolvedPath } from "react-router"; +import { + MemoryRouter, + Routes, + Route, + RouterProvider, + createMemoryRouter, + useResolvedPath, + Outlet, + useParams, +} from "react-router"; function ShowResolvedPath({ path }: { path: string | Path }) { return
{JSON.stringify(useResolvedPath(path))}
; @@ -313,4 +322,98 @@ describe("useResolvedPath", () => { `); }); }); + + // Follow up test to https://github.com/remix-run/react-router/pull/10983 to + // ensure we do this consistently across route types + it("resolves relative paths consistently across route types", async () => { + let router = createMemoryRouter([ + { + path: "/", + Component: Outlet, + children: [ + { + path: "static/foo", + Component: () =>

Static:{useResolvedPath("foo").pathname}

, + }, + { + path: "static/foo/foo", + Component: () => ( +

Static:{useResolvedPath("foo/foo").pathname}

+ ), + }, + { + path: "dynamic/:param", + Component: () =>

Dynamic:{useResolvedPath("foo").pathname}

, + }, + { + path: "dynamic/:param1/:param2", + Component: () => ( +

Dynamic:{useResolvedPath("foo/foo").pathname}

+ ), + }, + { + path: "splat/*", + Component: () => ( +

Splat:{useResolvedPath(useParams()["*"]).pathname}

+ ), + }, + ], + }, + ]); + + let renderer: TestRenderer.ReactTestRenderer; + TestRenderer.act(() => { + renderer = TestRenderer.create(); + }); + // @ts-expect-error + if (!renderer) throw new Error("renderer not defined"); + + await TestRenderer.act(() => router.navigate("/static/foo")); + expect(renderer.toJSON()).toMatchInlineSnapshot(` +

+ Static: + /static/foo/foo +

+ `); + + await TestRenderer.act(() => router.navigate("/dynamic/foo")); + expect(renderer.toJSON()).toMatchInlineSnapshot(` +

+ Dynamic: + /dynamic/foo/foo +

+ `); + + await TestRenderer.act(() => router.navigate("/splat/foo")); + expect(renderer.toJSON()).toMatchInlineSnapshot(` +

+ Splat: + /splat/foo/foo +

+ `); + + await TestRenderer.act(() => router.navigate("/static/foo/foo")); + expect(renderer.toJSON()).toMatchInlineSnapshot(` +

+ Static: + /static/foo/foo/foo/foo +

+ `); + + await TestRenderer.act(() => router.navigate("/dynamic/foo/foo")); + expect(renderer.toJSON()).toMatchInlineSnapshot(` +

+ Dynamic: + /dynamic/foo/foo/foo/foo +

+ `); + + await TestRenderer.act(() => router.navigate("/splat/foo/foo")); + expect(renderer.toJSON()).toMatchInlineSnapshot(` +

+ Splat: + /splat/foo/foo/foo/foo +

+ `); + }); });