打字稿：重定向组件“到”道具类型错误答案

【问题标题】：Typescript: Redirect component 'to' prop type error打字稿：重定向组件“到”道具类型错误
【发布时间】：2022-01-05 03:49:08
【问题描述】：

我得到了这个基本的错误显示组件。

它的工作原理是这样的：你进入页面，如果你传递了一个 prop 'redirectUrl'，你设置了一个 5 秒的计时器，然后它会触发重定向。所以这个 redirectUrl 属性是可选的。

但是，当我创建类型对象时，它会触发 Redirect 的 'to' 属性以引发此错误：

没有重载匹配这个调用。重载 1 of 2, '(props: 重定向道具 |只读）：重定向'，给出以下错误。键入'字符串 | undefined' 不可分配给类型 'LocationDescriptor'。类型“未定义”不可分配给类型“LocationDescriptor”。重载 2 of 2, '(props: RedirectProps, context: any): Redirect'，给出了以下错误。键入'字符串 | undefined' 不可分配给类型 'LocationDescriptor'.ts(2769) index.d.ts(57, 5)：预期 type 来自在 type 上声明的属性“to” 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>' index.d.ts(57, 5): 预期类型来自在类型上声明的属性“to” 'IntrinsicAttributes & IntrinsicClassAttributes & 只读和只读<...>'

你会如何避免这种情况？

代码：

import React, { useEffect, useState } from "react";
import { makeStyles, Box, Typography } from "@material-ui/core";
import { CloseOctagonOutline } from 'mdi-material-ui';
import { Redirect } from "react-router";

const useStyles = makeStyles((theme) => ({
    container: {
        minHeight: "100vh",
        backgroundColor: theme.palette.primary.dark,
    },
    icon: {
        fontSize: theme.spacing(7),
        color: 'red',
        marginBottom: theme.spacing(1),
    },
    innerContainer: {
        backgroundColor: "#fff",
        borderRadius: 12,
        maxWidth: 400,
        width: '80%',
        padding: theme.spacing(3),
    },
    title: {
        marginBottom: theme.spacing(2),
    },
    message: {
        marginBottom: theme.spacing(2),
    }
}));

export interface DisplayErrorPageProps {
    message: string,
    title: string,
    redirectUrl?: string,
}

export const DisplayErrorPage = ({ message, title, redirectUrl }: DisplayErrorPageProps) => {
    const classes = useStyles();
    const [redirect, setRedirect] = useState(false);

    useEffect(() => {
        if (redirectUrl) {
            setTimeout(() => {
                setRedirect(true);
            }, 5000);
        }
    }, []);

    return (
        <>
            {redirect && <Redirect to={redirectUrl} />}
            <Box
                display="flex"
                justifyContent="center"
                alignItems="center"
                className={classes.container}
            >
                <Box className={classes.innerContainer}>
                    <Box display='flex' justifyContent='center'>
                        <CloseOctagonOutline className={classes.icon} />
                    </Box>
                    <Typography className={classes.title} align='center' variant='h4'>{title}</Typography>
                    <Typography className={classes.message} align='center' variant='body2'>{message}</Typography>
                </Box>
            </Box>
        </>
    );
};

【问题讨论】：

标签： reactjs typescript react-router

【解决方案1】：

Redirect 组件不接受可以是 undefined 的 to 属性。

因此您可以更新条件渲染以检查 redirectUrl 是否存在，如下所示：

{redirect && redirectUrl ? <Redirect to={redirectUrl} /> : null}

【讨论】：