Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Wrap route with location arg in location context #9094

Merged
merged 5 commits into from
Sep 12, 2022
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .changeset/hungry-vans-ring.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@
"react-router-native": patch
---

Fix for `useLocation` returning the wrong `Location` when passing a `locationArg` into a `Routes` component.
fix: update `useLocation` to return the scoped `Location` when inside a `<Routes location>` component
49 changes: 44 additions & 5 deletions packages/react-router/__tests__/useLocation-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import * as React from "react";
import * as TestRenderer from "react-test-renderer";
import { MemoryRouter, Routes, Route, useLocation } from "react-router";

function ShowPath() {
let { pathname, search, hash } = useLocation();
return <pre>{JSON.stringify({ pathname, search, hash })}</pre>;
function ShowLocation() {
let location = useLocation();
return <pre>{JSON.stringify(location)}</pre>;
}

describe("useLocation", () => {
Expand All @@ -14,16 +14,55 @@ describe("useLocation", () => {
renderer = TestRenderer.create(
<MemoryRouter initialEntries={["/home?the=search#the-hash"]}>
<Routes>
<Route path="/home" element={<ShowPath />} />
<Route path="/home" element={<ShowLocation />} />
</Routes>
</MemoryRouter>
);
});

expect(renderer.toJSON()).toMatchInlineSnapshot(`
<pre>
{"pathname":"/home","search":"?the=search","hash":"#the-hash"}
{"pathname":"/home","search":"?the=search","hash":"#the-hash","state":null,"key":"default"}
</pre>
`);
});

it("returns the scoped location object when nested in <Routes location>", () => {
johnpangalos marked this conversation as resolved.
Show resolved Hide resolved
let renderer: TestRenderer.ReactTestRenderer;
TestRenderer.act(() => {
renderer = TestRenderer.create(
<MemoryRouter initialEntries={["/home?the=search#the-hash"]}>
<App />
</MemoryRouter>
);
});

function App() {
return (
<div>
<h1>App</h1>
<Routes>
<Route path="/home" element={<ShowLocation />} />
</Routes>
<Routes location="/scoped?scoped=search#scoped-hash">
<Route path="/scoped" element={<ShowLocation />} />
</Routes>
</div>
);
}

expect(renderer.toJSON()).toMatchInlineSnapshot(`
<div>
<h1>
App
</h1>
<pre>
{"pathname":"/home","search":"?the=search","hash":"#the-hash","state":null,"key":"default"}
</pre>
<pre>
{"pathname":"/scoped","search":"?scoped=search","hash":"#scoped-hash","state":null,"key":"default"}
</pre>
</div>
`);
});
});
12 changes: 3 additions & 9 deletions packages/react-router/__tests__/useRoutes-test.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from "react";
import * as TestRenderer from "react-test-renderer";
import type { RouteObject } from "react-router";
import { MemoryRouter, useRoutes, useLocation } from "react-router";
import { MemoryRouter, useRoutes } from "react-router";

describe("useRoutes", () => {
it("returns the matching element from a route config", () => {
Expand Down Expand Up @@ -54,15 +54,11 @@ describe("useRoutes", () => {
});

it("Uses the `location` prop instead of context location`", () => {
let TwoComponent = () => {
const location = useLocation();
return <h1>two path:{location.pathname}</h1>;
};
let routes = [
{ path: "one", element: <h1>one</h1> },
{
path: "two",
element: <TwoComponent />,
element: <h1>two</h1>,
},
];

Expand All @@ -75,11 +71,9 @@ describe("useRoutes", () => {
);
});

// console.log(renderer.toTree());
expect(renderer.toJSON()).toMatchInlineSnapshot(`
<h1>
two path:
/two
two
</h1>
`);
});
Expand Down
4 changes: 2 additions & 2 deletions packages/react-router/lib/hooks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -449,11 +449,11 @@ export function useRoutes(
<LocationContext.Provider
value={{
location: {
state: undefined,
key: "default",
pathname: "/",
search: "",
hash: "",
state: null,
johnpangalos marked this conversation as resolved.
Show resolved Hide resolved
key: "default",
...location,
},
navigationType: NavigationType.Pop,
Expand Down