fix(react): Make Route typing more generic (getsentry#3809)

AbhiPrasad · web-flow · commit 5f35c8c8fa86 · 2021-07-15T14:19:13.000Z
DefinitelyTyped/DefinitelyTyped#51355 merging in lead to some more robust type inference for React Router params. This means that for Typescript >= 4.1.5, certain param types break when using the `withSentryRouting` higher order component. To fix this issue, we use a generic instead of a React component type for the wrapped React component. As we have to use this generic instead of a specific React type, we have to use @ts-ignore to make the JSX expressions work with typescript. Fixes getsentry#3808
diff --git a/packages/react/src/reactrouter.tsx b/packages/react/src/reactrouter.tsx
@@ -148,18 +148,26 @@ function computeRootMatch(pathname: string): Match {
   return { path: '/', url: '/', params: {}, isExact: pathname === '/' };
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function withSentryRouting<P extends Record<string, any>>(Route: React.ComponentType<P>): React.FC<P> {
-  const componentDisplayName = Route.displayName || Route.name;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function withSentryRouting<P extends Record<string, any>, R extends React.ComponentType<P>>(Route: R): R {
+  const componentDisplayName = (Route as any).displayName || (Route as any).name;
 
   const WrappedRoute: React.FC<P> = (props: P) => {
     if (activeTransaction && props && props.computedMatch && props.computedMatch.isExact) {
       activeTransaction.setName(props.computedMatch.path);
     }
+
+    // @ts-ignore Setting more specific React Component typing for `R` generic above
+    // will break advanced type inference done by react router params:
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/13dc4235c069e25fe7ee16e11f529d909f9f3ff8/types/react-router/index.d.ts#L154-L164
     return <Route {...props} />;
   };
 
   WrappedRoute.displayName = `sentryRoute(${componentDisplayName})`;
   hoistNonReactStatics(WrappedRoute, Route);
+  // @ts-ignore Setting more specific React Component typing for `R` generic above
+  // will break advanced type inference done by react router params:
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/13dc4235c069e25fe7ee16e11f529d909f9f3ff8/types/react-router/index.d.ts#L154-L164
   return WrappedRoute;
 }
+/* eslint-enable @typescript-eslint/no-explicit-any */
