typescript - Předávání vlastností komponentám ProtectedRoute v Auth0

Řídím se zde pokyny k použití Auth0 s react-router-dom V6 a zatím se mi daří dostat to do provozu s základními trasami.

Teď se snažím to rozběhnout s komponentami, které přijímají props, a nejsem si jistý, jak props správně předat. Toto je kód pro ProtectedRoute

import React, { ComponentType } from 'react';
import { withAuthenticationRequired } from '@auth0/auth0-react';
import { Loading } from './Loading';

interface ProtectedRouteProps {
  component: ComponentType,
  props: any
}

export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
  component, props
}) => {
  const Component = withAuthenticationRequired(component, {
    onRedirecting: () => <Loading />,
  });

  return <Component {...props} />;
};

A nastavují základní komponentu trasy jako

<Route path="/" element={<ProtectedRoute component={Dashboard} />}/>

Můj prvek Dashboard očekává prop typu string s názvem testProp. Jaký by byl správný způsob, jak jej předat? Zkoušel jsem následující, ale žádný z nich nefunguje správně.

<Route path="/" element={<ProtectedRoute component={Dashboard}  testProp={"test"} />}/>

<Route path="/" element={<ProtectedRoute component={Dashboard}  props={{testProp: "test"}} />}/>

Může mi prosím někdo poskytnout příklad, jak předat props do ProtectedRoute, aby mohl být použit jako generický obal? Jsem v Reactu a TypeScriptu nováček a nedokážu přijít na správný postup.

Upravit:

S druhým přístupem dostanu v TypeScriptu následující chybu

(property) ProtectedRouteProps.component: React.ComponentType<{}>
Type '({ testProp }: Props) => JSX.Element' is not assignable to type 'ComponentType<{}>'.
  Type '({ testProp }: Props) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
    Types of parameters '__0' and 'props' are incompatible.
      Property 'testProp' is missing in type '{ children?: ReactNode; }' but required in type 'Props'.ts(2322)

Odpověď č. 1

Omlouvám se, že reaguji na tento příspěvek tak pozdě, ale nemohl jsem najít vhodnou odpověď, přesto se mi ji podařilo vyřešit.

Nepoužil jsem rozhraní, ale jsem si jistý, že byste to mohl snadno upravit tak, aby je používalo. Všechny mé trasy jsou posílány do výstupu (Outlet).

Zkuste toto: Definice ProtectedRoute v nadřazené komponentě:

const ProtectedRoute: React.FC<{ component: React.FC<{ testProp: string }>; testProp: string; }> =
    ({ component, testProp }) =>
    {
        const Component: React.FC<{ testProp: string; }> =
            withAuthenticationRequired(component);

    return <Component testProp={testProp} />;
};

pokud chcete použít ProtectedRoute pro cesty, které nepoužívají vlastnost, udělejte ji volitelnou a použijte neprázdné tvrzení (!) v ukázce podřízené komponenty níže:

const ProtectedRoute: React.FC<{ component: React.FC<{ testProp?: string }>; testProp?: string; }> =
    ({ component, testProp }) =>
    {
        const Component: React.FC<{ testProp?: string; }> =
            withAuthenticationRequired(component);

    return <Component testProp={testProp} />;
};

Trasa (bez změny, pokud používáte volitelné parametry nebo ne):

<Route path='/' element={<ProtectedRoute component={Dashboard} testProp={testProp} />} />

Řídicí panel:

...your stuff here

const Dashboard: React.FC<{testProp: string; }> = ({testProp}) => { 
    const newVal = testProp;

    ...your stuff here...
};
    
export default Dashboard;

použití volitelného parametru

...your stuff here

const Dashboard: React.FC<{testProp?: string; }> = ({testProp}) => { 
    const newVal = testProp!;

    ...your stuff here...
};
    
export default Dashboard;