使用打字稿创建自定义反应路由组件。类型上不存在属性“路径”... RouteProps

Posted 2023-02-23

【中文标题】使用打字稿创建自定义反应路由组件。类型上不存在属性“路径”... RouteProps

【英文标题】：Create custom react route component with typescript. Property 'path' does not exist on type... RouteProps

【发布时间】：2019-01-18 03:17:59

【问题描述】：

我正在尝试使用 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)

还有 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>;

打字稿错误

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

老实说，这是我遇到此错误的第二天，我完全疯了 xD 在我看来它应该可以工作，因为路径和组件是 RouteProps 接口的一部分，并且 isAuthenticated 是从 redux 商店提供的。如果有人能向我解释问题出在哪里，我将不胜感激。

【参考方案1】：

我终于找到了答案。我做了一些研究，发现 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)