Question

我正在尝试使用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存储提供的。如果有人可以向我解释问题出在哪里，我将不胜感激。

Answer 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)

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

1 个答案: