使用 Typescript 在 react redux 中使用类型为 RouteComponentProps 的 prop 元素

Question

I have a Component with the following props:

interface LocationBoxProps {
    location: Location | null
    workshift: Workshift
}

The interface cannot extend RouteComponentProps because it already have a location field and to obtain a cleaner interface I would like to create a field of type RouteComponentProps. Something like this:

interface LocationBoxProps {
    location: Location | null
    workshift: Workshift
    routeProps: RouteComponentProps // <- new field
}

however I don't know how to map this new field (routeProps) in the mapStateToProps method. I treid

const mapStateToProps = (store: RootState, ownProps: LocationBoxProps) => {
    return{
        location: store.work.location,
        workshift: store.work.workshift,

        routeProps: ownProps.routeProps
    }
}

but when I try to do this.props.routeProps.history.push('/something') I get the error

Cannot read property 'history' of undefined

How can I map correctly routeProps in mapStateToProps?

Answer 1

I think you're confusing which props are coming from redux and which are coming from react-router-dom. Mapping routeProps: ownProps.routeProps does nothing because you're expecting the props to already be present under the key routeProps and then assigning them back to the same key.

Do you need to use location from the router, or just the history ? If all you need is the history then get rid of all of this stuff about routeProps and just access this.props.history.push('/something') .

If you're concerned about naming collisions, you can access the history and location using hooks so that you can name them whatever you want. The hooks also make things easier for typescript to understand because Route injects props in a way that is somewhat hidden.