Reactjs 使用typescript创建自定义反应路由组件。财产'；路径'；类型上不存在。。。路由程序

我正在尝试使用react创建自己的路由组件。我使用打字脚本，但我是新手，所以我认为这是我问题的根源

import * as React from 'react'
import { ApplicationState } from '../../store'
import { connect } from 'react-redux'
import { RouteComponentProps, RouteProps, Route, Redirect } from 'react-router-dom'

interface UserRouteProps extends RouteProps{
    isAuthenticated: boolean
};

type RouteComponent = React.StatelessComponent<RouteComponentProps<{}>> | React.ComponentClass<any>

class UserRoute extends React.Component<UserRouteProps, {}>{
    constructor() {
        super()
    }

    private renderFn = (Component?: RouteComponent) => (props: RouteProps) => {
        if (!Component) {
            return null
        }

        if (this.props.isAuthenticated) {
            return <Component {...props} />
        }

        const redirectProps = {
            to: {
                pathname: "/register",
                state: { from: props.location },
            },
        }

        return <Redirect {...redirectProps} />
    }

    public render() {
        const { component: Component, isAuthenticated, ...rest } = this.props
        return <Route {...rest} render={this.renderFn(Component)} />
    }
}

const mapStateToProps = (state: ApplicationState) => ({ isAuthenticated: !!state.user.username })

export default connect(mapStateToProps, {})(UserRoute)

import*作为来自“React”的React
从“../../store”导入{ApplicationState}
从“react redux”导入{connect}
从“react router dom”导入{RouteComponentProps，RouteProps，Route，Redirect}
接口UserRouteProps扩展了RouteProps{
isAuthenticated:布尔值
};
键入RouteComponent=React.StatelementComponent | React.ComponentClass
类UserRoute扩展了React.Component{
构造函数（）{
超级（）
}
私有renderFn=（组件？：RouteComponent）=>（道具：RouteProps）=>{
如果（！组件）{
返回空
}
如果（此.props.isAuthenticated）{
返回
}
常量重定向道具={
致：{
路径名：“/register”，
状态：{from:props.location}，
},
}
返回
}
公共渲染（）{
const{component:component，isAuthenticated，…rest}=this.props
返回
}
}
常量mapStateToProps=（状态：ApplicationState）=>（{isAuthenticated:！！state.user.username}）
导出默认连接（MapStateTops，{}）（UserRoute）

和route.tsx文件：

import * as React from 'react';
import { Route } from 'react-router-dom';
import { Layout } from './components/Layout';
import Home from './components/Pages/Home';
import Login from './components/Pages/Login';
import Register from './components/Pages/Register';
import UserRoute from './components/Routes/UserRoute'

export const routes =
    <Layout>
        <Route exact path='/' component={Home} />
        <UserRoute path="/login" component={Login} />
    </Layout>;

import*as React from'React'；
从'react router dom'导入{Route}；
从“./components/Layout”导入{Layout}；
从“./components/Pages/Home”导入主页；
从“./components/Pages/Login”导入登录名；
从“./components/Pages/Register”导入寄存器；
从“./components/Routes/UserRoute”导入UserRoute
导出常量路径=
;

打字错误

:in [at-loader] ./ClientApp/routes.tsx:12:20 
    TS2339: Property 'path' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

：in[at loader]。/ClientApp/routes.tsx:12:20
TS2339:类型“IntrinsicatAttributes&IntrinsicClassAttributes&Readonly”上不存在属性“path”我终于找到了答案。我做了一些研究，发现mapStateToProps函数有一个可选的ownProps参数。所以我重构了mapStateToProps，我们就到了

import * as React from 'react'
import { ApplicationState } from '../../store'
import { connect } from 'react-redux'
import { RouteComponentProps, RouteProps, Route, Redirect } from 'react-router-dom'

interface UserRouteProps{
    isAuthenticated: boolean
};

type RouteComponent = React.StatelessComponent<RouteComponentProps<{}>> | React.ComponentClass<any>

class UserRoute extends React.Component<UserRouteProps & RouteProps, {}>{
    constructor(props: UserRouteProps & RouteProps) {
        super(props)
    }

    private renderFn = (Component?: RouteComponent) => (props: RouteProps) => {
        if (!Component) {
            return null
        }

        if (this.props.isAuthenticated) {
            return <Component {...props} />
        }

        const redirectProps = {
            to: {
                pathname: "/register",
                state: { from: props.location },
            },
        }

        return <Redirect {...redirectProps} />
    }

    public render() {
        const { component, isAuthenticated, ...rest } = this.props
        return <Route {...rest} render={this.renderFn(component)} />
    }
}

const mapStateToProps = (state: ApplicationState, ownProps: RouteProps) => {
    return {
        isAuthenticated: !!state.user.username,
        ...ownProps
    }
}

export default connect(mapStateToProps, {})(UserRoute)

import*作为来自“React”的React
从“../../store”导入{ApplicationState}
从“react redux”导入{connect}
从“react router dom”导入{RouteComponentProps，RouteProps，Route，Redirect}
接口UserRouteProps{
isAuthenticated:布尔值
};
键入RouteComponent=React.StatelementComponent | React.ComponentClass
类UserRoute扩展了React.Component{
构造函数（道具：UserRouteProps和RouteProps）{
超级（道具）
}
私有renderFn=（组件？：RouteComponent）=>（道具：RouteProps）=>{
如果（！组件）{
返回空
}
如果（此.props.isAuthenticated）{
返回
}
常量重定向道具={
致：{
路径名：“/register”，
状态：{from:props.location}，
},
}
返回
}
公共渲染（）{
const{component，isAuthenticated，…rest}=this.props
返回
}
}
常量mapStateToProps=（状态：ApplicationState，ownProps:RouteProps）=>{
返回{
已验证：！！state.user.username，
…自己的道具
}
}
导出默认连接（MapStateTops，{}）（UserRoute）
我终于找到了答案。我做了一些研究，发现mapStateToProps函数有一个可选的ownProps参数。所以我重构了mapStateToProps，我们就到了

import * as React from 'react'
import { ApplicationState } from '../../store'
import { connect } from 'react-redux'
import { RouteComponentProps, RouteProps, Route, Redirect } from 'react-router-dom'

interface UserRouteProps{
    isAuthenticated: boolean
};

type RouteComponent = React.StatelessComponent<RouteComponentProps<{}>> | React.ComponentClass<any>

class UserRoute extends React.Component<UserRouteProps & RouteProps, {}>{
    constructor(props: UserRouteProps & RouteProps) {
        super(props)
    }

    private renderFn = (Component?: RouteComponent) => (props: RouteProps) => {
        if (!Component) {
            return null
        }

        if (this.props.isAuthenticated) {
            return <Component {...props} />
        }

        const redirectProps = {
            to: {
                pathname: "/register",
                state: { from: props.location },
            },
        }

        return <Redirect {...redirectProps} />
    }

    public render() {
        const { component, isAuthenticated, ...rest } = this.props
        return <Route {...rest} render={this.renderFn(component)} />
    }
}

const mapStateToProps = (state: ApplicationState, ownProps: RouteProps) => {
    return {
        isAuthenticated: !!state.user.username,
        ...ownProps
    }
}

export default connect(mapStateToProps, {})(UserRoute)

import*作为来自“React”的React
从“../../store”导入{ApplicationState}
从“react redux”导入{connect}
从“react router dom”导入{RouteComponentProps，RouteProps，Route，Redirect}
接口UserRouteProps{
isAuthenticated:布尔值
};
键入RouteComponent=React.StatelementComponent | React.ComponentClass
类UserRoute扩展了React.Component{
构造函数（道具：UserRouteProps和RouteProps）{
超级（道具）
}
私有renderFn=（组件？：RouteComponent）=>（道具：RouteProps）=>{
如果（！组件）{
返回空
}
如果（此.props.isAuthenticated）{
返回
}
常量重定向道具={
致：{
路径名：“/register”，
状态：{from:props.location}，
},
}
返回
}
公共渲染（）{
const{component，isAuthenticated，…rest}=this.props
返回
}
}
常量mapStateToProps=（状态：ApplicationState，ownProps:RouteProps）=>{
返回{
已验证：！！state.user.username，
…自己的道具
}
}
导出默认连接（MapStateTops，{}）（UserRoute）