如何在 React/Typescript 中定义历史和匹配类型（来自 React Router Dom）答案

【问题标题】：how to define history and match type(from React Router Dom) in React/Typescript如何在 React/Typescript 中定义历史和匹配类型（来自 React Router Dom）
【发布时间】：2021-12-16 00:49:57
【问题描述】：

我有一个使用 React、React Router Dom(RRD)、Redux 和 Typescript 的项目。默认情况下，RRD 将 match 和 history 道具传递给我在 Route 组件道具中定义的子组件（见下文）。在我的组件内部，Redux 还在我的组件中添加了两个道具，一个函数（getPlaylist）和一个对象（auth）。

在我的组件中，当我输入所有道具时，我无法输入match 和history。

我尝试了以下方法，但没有成功：

RouteComponentProps 添加了我的自定义道具
从 RRD 导入 History，如下所示： import { History } from "react-router-dom" 并将其用作类型（参见我的代码）

我的组件

import React, { useEffect, useState, useMemo, useLayoutEffect } from "react"
import { connect } from "react-redux"
import PropTypes from "prop-types"
import CreatePlaylist from "../components/playlist/CreatePlaylist"
import { getPlaylist } from "../actions/playlistActions"
import isEmpty from "../utils/isEmpty"
import { Auth, Playlist } from "interfaces"
import { RouteComponentProps } from "react-router"
import { History } from "react-router-dom"

type EditPlaystProps2 = {
    getPlaylist: Function
    playlist: Playlist
    auth: Auth
}

interface EditPlaystProps {
    history: History
    auth: Auth
    getPlaylist: Function
    playlist: Playlist
    match: any
}

function EditPlaylist({
    history,
    auth,
    getPlaylist,
    playlist,
    match,
}: RouteComponentProps<EditPlaystProps2>) {
const [currentPlaylist, setcurrentPlaylist] = useState({})

    useEffect(() => {
        const { isAuthenticated } = auth

        if (!isAuthenticated) {
            history.push("/login")
        }
    }, [auth, history])

    useLayoutEffect(() => {
        getPlaylist(match.params.slug)
    }, [getPlaylist, match.params.slug])

    useMemo(() => {
        const { isAuthenticated } = auth

        if (!isAuthenticated) {
            history.push("/login")
        }
        if (playlist) {
            setcurrentPlaylist(playlist)
        }
    }, [auth, history, setcurrentPlaylist, playlist])

    const editQupplistContent = () => {
        const playlistsHaveLoaded = !isEmpty(currentPlaylist.playlist)

        if (playlistsHaveLoaded) {
            return (
                <CreatePlaylist
                    name={currentPlaylist.playlist.name}
                    slug={currentPlaylist.playlist.slug}
                    id={currentPlaylist.playlist._id}
                    title="Edit playlist"
                    buttonText="Edit playlist"
                />
            )
        }
    }

    return (
        <div>
            <h1>Edit playlist</h1>

            {editQupplistContent()}
        </div>
    )
}

EditPlaylist.propTypes = {
    getPlaylist: PropTypes.func.isRequired,
    playlist: PropTypes.object,
    auth: PropTypes.object.isRequired,
}

const mapStateToProps = (state) => ({
    auth: state.auth,
    playlist: state.playlist,
})

export default connect(mapStateToProps, { getPlaylist })(EditPlaylist)

【问题讨论】：

功能组件中真的需要connect吗？您可以使用useHistory 钩子，如果您需要访问历史记录，请使用Secector 作为您的redux 状态等...
我最近将此函数从基于类的函数转换为函数 comp 并且不知道这些钩子。所以绝对不需要使用connect，谢谢提醒。

标签： javascript reactjs typescript react-router react-typescript

【解决方案1】：

type Props = RouteComponentProps & {
  getPlaylist: Function,
  playlist: Playlist,
  auth: Auth,
}

喜欢这样吗？

【讨论】：