reactjs - TypeScript React-funktionell komponent - saknar följande egenskaper från typen 'Element': type, props, key fel

Jag har följande definitioner:

IRoute:

export interface IRoute{
    key: string, 
    path: string,
    exact: boolean,
    component: JSX.Element,
    private?: boolean
}

IRoutesConfig:

import { IRoute } from "./IRoute";

export default interface IRoutesConfig {
    [key : string] : [IRoute]
}

och min Routkonfiguration, som jag sedan kommer att vidarebefordra till en klass för ytterligare förbättringar

import Login from "../container/Auth/Login/Login";
import IRoutesConfig from "./IRoutesConfig";

const Routes : IRoutesConfig = {
    "Auth": [
        {
            key: "login-page",
            exact: true, 
            component: Login,
            path: "/auth/login"
        }
    ]
}

export default Routes;

Jag testar med en Login-funktionskomponent:

import React, { FC, ReactElement } from 'react';

type LoginProps = {

}

const Login : FC<LoginProps> = (props) : ReactElement => {
  return (
    <>
    
    </>
  );
}

export default Login;

Detta är en ny projektuppsättning och det finns ännu inget definierat för Login Props. Så det är för närvarande tomt och kommer att utökas senare, samma gäller för innehållet, eftersom vi för närvarande håller på att sätta upp ruttarkitekturen.

VSCode ger mig följande ledtråd över "component" i Routes:IRoutesConfig:

Självklart deklarerar jag inte typ, props och nyckel.

I slutändan kommer rutterkonfigurationen att ges till en RouteManager, som dynamiskt kommer att skapa Routes för Switch i `React-Router-Dom', plus några andra saker, beroende på var jag kommer åt den.

Det kommer att skapa en karta över rutter såsom:

<Route key="login-page" path="/auth/login" component={Login} />

Vilket sedan används i en React-containerkomponent:

...

let authRoutes = RoutesManager.getAllRoutes("Auth");

return (
    <Switch>
      {authRoutes}
      <Redirect key="account-redirect" to="/account" />
    </Switch>
  );

Fråga: Enligt min förståelse förväntar sig react-router-dom route i sitt argument component ett JSX.element, men returtypen för min funktionella komponent Login är ett ReactElement. JSX.element är ett generiskt ReactElement i detta sammanhang, såvitt jag förstått. Login FC kommer att ha children.

Hur kan jag lösa problemet med att skicka Login FC till konfigurationen korrekt, så att den senare kan användas av route-komponenten i react-router-dom?

Svar #1

Som jag förstod kommer felet från component: JSX.Element. Och du försöker skapa skyddade rutter genom att lägga till en private-egenskap till Route. Du kan ändra ditt IRoute-gränssnitt för att utöka de typer som definieras av react-router så att du inte stöter på detta problem längre.

Först: Lägg till denna import-sats.

import { RouteProps } from "react-router-dom";

Andra: ändra ditt IRoute-gränssnitt till detta:

export interface IRoute extends RouteProps{
    private?: boolean
}

På det här sättet säger du helt enkelt att min IRoute har alla de enkla Route-egenskaperna plus private.