Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
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
5 changes: 5 additions & 0 deletions .changeset/real-rules-compare.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"react-router": patch
---

Fix `TypeError` if you throw from `patchRoutesOnNavigation` when no partial matches exist
85 changes: 85 additions & 0 deletions packages/react-router/__tests__/router/lazy-discovery-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2103,6 +2103,91 @@ describe("Lazy Route Discovery (Fog of War)", () => {
expect(router.state.matches.map((m) => m.route.id)).toEqual(["a", "b"]);
});

it("handles errors thrown from patchRoutesOnNavigation() when there are no partial matches (GET navigation)", async () => {
router = createRouter({
history: createMemoryHistory(),
routes: [
{
id: "a",
path: "a",
},
],
async patchRoutesOnNavigation({ patch }) {
await tick();
throw new Error("broke!");
},
});

await router.navigate("/b");
expect(router.state).toMatchObject({
// A bit odd but this is a result of our best attempt to display some form
// of error UI to the user - follows the same logic we use on 404s
matches: [
{
params: {},
pathname: "",
pathnameBase: "",
route: {
children: undefined,
hasErrorBoundary: false,
id: "a",
path: "a",
},
},
],
location: { pathname: "/b" },
actionData: null,
loaderData: {},
errors: {
a: new Error("broke!"),
},
});
});

it("handles errors thrown from patchRoutesOnNavigation() when there are no partial matches (POST navigation)", async () => {
router = createRouter({
history: createMemoryHistory(),
routes: [
{
id: "a",
path: "a",
},
],
async patchRoutesOnNavigation({ patch }) {
await tick();
throw new Error("broke!");
},
});

await router.navigate("/b", {
formMethod: "POST",
formData: createFormData({}),
});
expect(router.state).toMatchObject({
// A bit odd but this is a result of our best attempt to display some form
// of error UI to the user - follows the same logic we use on 404s
matches: [
{
params: {},
pathname: "",
pathnameBase: "",
route: {
children: undefined,
hasErrorBoundary: false,
id: "a",
path: "a",
},
},
],
location: { pathname: "/b" },
actionData: null,
loaderData: {},
errors: {
a: new Error("broke!"),
},
});
});

it("bubbles errors thrown from patchRoutesOnNavigation() during hydration", async () => {
router = createRouter({
history: createMemoryHistory({
Expand Down
25 changes: 25 additions & 0 deletions packages/react-router/lib/router/router.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1802,6 +1802,20 @@ export function createRouter(init: RouterInit): Router {
if (discoverResult.type === "aborted") {
return { shortCircuited: true };
} else if (discoverResult.type === "error") {
if (discoverResult.partialMatches.length === 0) {
let { matches, route } = getShortCircuitMatches(dataRoutes);
return {
matches,
pendingActionResult: [
route.id,
{
type: ResultType.error,
error: discoverResult.error,
},
],
};
}

let boundaryId = findNearestBoundary(discoverResult.partialMatches)
.route.id;
return {
Expand Down Expand Up @@ -1996,6 +2010,17 @@ export function createRouter(init: RouterInit): Router {
if (discoverResult.type === "aborted") {
return { shortCircuited: true };
} else if (discoverResult.type === "error") {
if (discoverResult.partialMatches.length === 0) {
let { matches, route } = getShortCircuitMatches(dataRoutes);
return {
matches,
loaderData: {},
errors: {
[route.id]: discoverResult.error,
},
};
}

let boundaryId = findNearestBoundary(discoverResult.partialMatches)
.route.id;
return {
Expand Down