From 041f6aa3bdf8544e7ef6e6d0d8a0e4b20f480523 Mon Sep 17 00:00:00 2001 From: Philip Atkinson Date: Fri, 7 Oct 2022 13:24:39 -0400 Subject: [PATCH 1/3] Update Types to Match React Router Updates Fixes a type mismatch caused by change https://github.com/remix-run/react-router/pull/9366 in react-router code. --- packages/react/src/reactrouterv6.tsx | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/react/src/reactrouterv6.tsx b/packages/react/src/reactrouterv6.tsx index 66282545f248..a3f298d69ffe 100644 --- a/packages/react/src/reactrouterv6.tsx +++ b/packages/react/src/reactrouterv6.tsx @@ -8,14 +8,24 @@ import React from 'react'; import { Action, Location } from './types'; -interface RouteObject { - caseSensitive?: boolean; - children?: RouteObject[]; - element?: React.ReactNode; - index?: boolean; - path?: string; +interface NonIndexRouteObject { + caseSensitive?: boolean; + children?: RouteObject[]; + element?: React.ReactNode | null; + index?: false; + path?: string; } +interface IndexRouteObject { + caseSensitive?: boolean; + children?: undefined; + element?: React.ReactNode | null; + index?: true; + path?: string; +} + +type RouteObject = IndexRouteObject | NonIndexRouteObject; + type Params = { readonly [key in Key]: string | undefined; }; From 82fa13767fcd67d2885f44042a0bdad5d29a6f87 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Wed, 19 Oct 2022 11:14:24 +0200 Subject: [PATCH 2/3] add reasoning about why this change is happening --- packages/react/src/reactrouterv6.tsx | 30 +++++++++++++++++----------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/packages/react/src/reactrouterv6.tsx b/packages/react/src/reactrouterv6.tsx index a3f298d69ffe..c7de2665ddb5 100644 --- a/packages/react/src/reactrouterv6.tsx +++ b/packages/react/src/reactrouterv6.tsx @@ -9,21 +9,24 @@ import React from 'react'; import { Action, Location } from './types'; interface NonIndexRouteObject { - caseSensitive?: boolean; - children?: RouteObject[]; - element?: React.ReactNode | null; - index?: false; - path?: string; + caseSensitive?: boolean; + children?: RouteObject[]; + element?: React.ReactNode | null; + index?: false; + path?: string; } interface IndexRouteObject { - caseSensitive?: boolean; - children?: undefined; - element?: React.ReactNode | null; - index?: true; - path?: string; + caseSensitive?: boolean; + children?: undefined; + element?: React.ReactNode | null; + index?: true; + path?: string; } +// This type was originally just `type RouteObject = IndexRouteObject`, but this was changed +// in https://github.com/remix-run/react-router/pull/9366, which was released with `6.4.2` +// See https://github.com/remix-run/react-router/issues/9427 for a discussion on this. type RouteObject = IndexRouteObject | NonIndexRouteObject; type Params = { @@ -55,7 +58,10 @@ interface RouteMatch { type UseEffect = (cb: () => void, deps: unknown[]) => void; type UseLocation = () => Location; type UseNavigationType = () => Action; -type CreateRoutesFromChildren = (children: JSX.Element[]) => RouteObject[]; +// Have to make this return any so we maintain backwards compatability between +// react-router > 6.0.0 and >= 6.4.2 +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type CreateRoutesFromChildren = (children: JSX.Element[]) => any; type MatchRoutes = (routes: RouteObject[], location: Location) => RouteMatch[] | null; let activeTransaction: Transaction | undefined; @@ -219,7 +225,7 @@ export function withSentryReactRouterV6Routing

, R _useEffect(() => { // Performance concern: // This is repeated when is rendered. - routes = _createRoutesFromChildren(props.children); + routes = _createRoutesFromChildren(props.children) as RouteObject[]; isBaseLocation = true; updatePageloadTransaction(location, routes); From 6fe8bdb66a1a5f97f8249c916040a36afdf9e017 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Wed, 19 Oct 2022 11:20:17 +0200 Subject: [PATCH 3/3] Adjust typing --- packages/react/src/reactrouterv6.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/react/src/reactrouterv6.tsx b/packages/react/src/reactrouterv6.tsx index c7de2665ddb5..8510dffb2d05 100644 --- a/packages/react/src/reactrouterv6.tsx +++ b/packages/react/src/reactrouterv6.tsx @@ -58,11 +58,16 @@ interface RouteMatch { type UseEffect = (cb: () => void, deps: unknown[]) => void; type UseLocation = () => Location; type UseNavigationType = () => Action; -// Have to make this return any so we maintain backwards compatability between -// react-router > 6.0.0 and >= 6.4.2 + +// For both of these types, use `any` instead of `RouteObject[]` or `RouteMatch[]`. +// Have to do this so we maintain backwards compatability between +// react-router > 6.0.0 and >= 6.4.2. +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type RouteObjectArrayAlias = any; // eslint-disable-next-line @typescript-eslint/no-explicit-any -type CreateRoutesFromChildren = (children: JSX.Element[]) => any; -type MatchRoutes = (routes: RouteObject[], location: Location) => RouteMatch[] | null; +type RouteMatchAlias = any; +type CreateRoutesFromChildren = (children: JSX.Element[]) => RouteObjectArrayAlias; +type MatchRoutes = (routes: RouteObjectArrayAlias, location: Location) => RouteMatchAlias[] | null; let activeTransaction: Transaction | undefined; @@ -122,7 +127,7 @@ function getNormalizedName( return [location.pathname, 'url']; } - const branches = matchRoutes(routes, location); + const branches = matchRoutes(routes, location) as unknown as RouteMatch[]; let pathBuilder = ''; if (branches) {