Question

单击按钮时，我试图重定向到注册页面，但是，我收到“此调用错误没有超载匹配”。我尝试向Google搜索该错误，但是它似乎范围很广，而且我是Typescript的新手，所以不确定如何修复它。

我应该如何解决该错误以及单击按钮时如何显示注册表单？

// Main.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, useRouteMatch, useParams } from 'react-router-dom';
import Button from '@material-ui/core/Button';
import Link from '@material-ui/core/Link';
import { SignUp } from "./SignUp";

function Main() {
    // some stuff above
    <Button component= { Link } to="/signup" variant="contained" color="primary">Sign up!</Button>
    // some stuff below
}

ReactDOM.render((
    <BrowserRouter>
        <Switch>
            <Route path="/">
                <Main />
            </Route>
            <Route path="/signup">
                <SignUp />
            </Route>
        </Switch>
    </BrowserRouter>),document.getElementById("main")
);

这是我收到的错误消息：

TS2769：没有过载与该调用匹配。重载3之1，'（props：{href：string;}＆{children ?: ReactNode; color ?: Color; Disabled ?: boolean; disableElevation ?: boolean; disableFocusRipple ?: boolean; endIcon ?: ReactNode; fullWidth ?: boolean; href ?: string; size ?:“ medium” | ...另外1个| |“ small”; startIcon ?: ReactNode; variant ?:“ text” | ... 1个其他... |“包含“;}＆{...;}＆CommonProps <...>＆Pick <...>）：元素'，出现以下错误。输入'{children：string;组件：OverridableComponent>;到：字符串;类型：字符串； fullWidth：true;变体：“包含”；颜色：“主要”； className：字符串； onClick：（）=>无效； }”不能分配给“ IntrinsicAttributes＆{href：string; }＆{儿童？：ReactNode;颜色？禁用？：布尔值； disableElevation ?:布尔值; disableFocusRipple ?:布尔值; ...另外5个...;变体？：“文本” | ... 1更多... | “包含”； }＆{...; }＆CommonProps <...>＆Pick <...>'。属性'component'在类型'IntrinsicAttributes和{href：string; }＆{儿童？：ReactNode;颜色？禁用？：布尔值； disableElevation ?:布尔值; disableFocusRipple ?:布尔值; ...另外5个...;变体？：“文本” | ... 1更多... | “包含”； }＆{...; }＆CommonProps <...>＆Pick <...>'。重载2之3，'（props：{component：OverridableComponent>;}＆{children ?: ReactNode; color ?: Color; Disabled ?: boolean; disableElevation ?: boolean; ... 6个以上...; Variant ?: “ text” | ... 1个更多... |“ contained”;}＆{...;}＆CommonProps <...>＆Pick <...>）：元素'，出现以下错误。类型“字符串”不可分配给类型“从不”。重载3之3，'（props：DefaultComponentProps >>）：Element'，出现以下错误。输入'{children：string;组件：OverridableComponent>;到：字符串;类型：“提交”； fullWidth：true；变体：“包含”；颜色：“主要”； className：字符串； onClick：（）=>无效； }'不能分配给'IntrinsicAttributes＆{children ?: ReactNode;颜色？禁用？：布尔值； disableElevation ?:布尔值; disableFocusRipple ?:布尔值; endIcon ?: ReactNode; ...另外4个...;变体？：“文本” | ... 1更多... | “包含”； }＆{...; }＆CommonProps <...>＆Pick <...>'。属性'component'在类型'IntrinsicAttributes＆{children ?: ReactNode;颜色？禁用？：布尔值； disableElevation ?:布尔值; disableFocusRipple ?:布尔值; endIcon ?: ReactNode; ...另外4个...;变体？：“文本” | ... 1更多... | “包含”； }＆{...; }＆CommonProps <...>＆Pick <...>'。

Answer 1

这是Material-ui的一部分，这意味着您的组件使用了原本应该没有的道具。

如果您这样做：

import Button from '@material-ui/core/Button';
import Link from '@material-ui/core/Link';

<Button component={Link} to="/signup" variant="contained" color="primary">Sign up!</Button>

您说要做出反应，即您希望将Button渲染为Material-Ui链接。问题是，Material Ui Link https://material-ui.com/api/link/没有“ to”道具。因此您会得到例外。

如果您使用React Router，请像这样更改代码：

import { Link as RouterLink } from "react-router-dom";
import Button from "@material-ui/core/Button";

<Button component={RouterLink} to="/singup" variant="contained" color="primary">Sign up!</Button>

如果这样做，则告诉React您想从react-router-dom将Button渲染为RouterLink。现在，此链接确实具有一个像以前一样的道具。

或者，您可以使用material-ui链接组件中的“ href”道具，但这会弄乱您的路由，因为这将呈现普通的<a href=""></a>而不是React-Router <Link>。

Answer 2

您能否更改路由并尝试定义这样的路由，希望对您有所帮助

<Route path="/signup" component={SignUp} />

打字稿路由错误-没有重载匹配此调用

2 个答案: