Как добавить типы для реагирования частного маршрутизатора?

Question

Я хочу добавить приватный маршрутизатор для аутентифицированных пользователей. И найти простое решение с частным компонентом маршрутизатора, но машинопись возвращает мне ошибку типа. Я пытался добавить любые типы, но это не помогает. Как я могу добавить типы здесь?

Error:(18, 18) TS2322: Type '{ exact: true; path: string; component: typeof Main; }' is not assignable to type 'IntrinsicAttributes & Component<any, any, any>'.
  Property 'exact' does not exist on type 'IntrinsicAttributes & Component<any, any, any>'.

Маршрутизаторы

import { Route, Switch } from 'react-router-dom';
import React, { Component } from 'react';
import app from 'firebase/app';

import Main from "src/Templates/Main/Main.container";
import Login from "src/Templates/Login/Container/Login";
import PrivateRoute from "src/Core/Routers/PrivateRoute";
import {withFirebase} from "src/Templates/Firebase";


class Routes extends Component<any, any> {


    render() {
        return (
            <Switch>
                <PrivateRoute exact  path='/' component={Main} />
                <Route exact path='/login' component={Login} />
            </Switch>
        )
    }
}

export default Routes;

PrivateRouter

import React, {Component} from 'react';
import { Redirect, Route } from 'react-router-dom';


const PrivateRoute = (component: Component<any, any>, { ...rest }: any): any => (
    <Route {...rest} render={(props: any) => (
    props.auth !== null ? (
        <Component {...props} />
    ) : (
    <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
        }}
    />
        )
    )} />
);

//withFirebase() its my HOC fabric component, with provides props for check auth user.

export default withFirebase(PrivateRoute);

Answer 1

Когда вы используете тип как любой, вы портите вкус машинописи.

Теперь, глядя на ваш код, я думаю, что вы хотите, чтобы пользователь перешел по определенному пути наНа основании значения auth в подпорках.и все остальные реквизиты должны быть такими же, как и в реакции-маршрутизаторе.

И ясная ошибка, которую я вижу в вашем коде, заключается в том, что вы получаете каждую опору в качестве параметра в функциональном компоненте, но он получает только одинпараметр, то есть объект реквизита.

Итак, в вашем подходе это должно быть,

const PrivateRoute = (props: any): any => ()

Теперь более чистый и лучший подход будет:

import React, {Component} from 'react';
import { RouteProps, Route, Redirect } from 'react-router-dom';
export interface PrivateRouteProps extends RouteProps {
   auth: boolean | null
}

function PrivateRoute({ component: Component, auth, ...rest }: PrivateRouteProps) {
    return (
        <Route
            {...rest}
            render={(props) => auth !== true
                ? <Component {...props} />
                : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />}
        />
    )
}