Создайте настраиваемый компонент маршрута реакции с помощью машинописного текста. свойство path не существует для типа ... routeprops

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

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. Я был бы очень признателен, если бы мне кто-нибудь объяснил, в чем проблема.

0
0
1 207
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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)

Другие вопросы по теме