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

Posted 2023-02-19

【中文标题】打字稿路由错误 - 没有重载匹配此调用

【英文标题】：Typescript Routing Error - No overload matches this call

【发布时间】：2020-10-10 10:56:06

【问题描述】：

我试图在单击按钮时重定向到注册页面，但是，我收到“没有重载匹配此调用错误”。我尝试用谷歌搜索该错误，但它似乎很广泛，而且我是 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：没有与此调用匹配的重载。 重载 1 of 3, '(props: href: string; & children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; fullWidth?: boolean; href?: string; size?: "medium" | ... 1 more ... | "small"; startIcon?: ReactNode; variant?: "text" | ... 1 more ... | "contained "; & ...; & CommonProps<...> & Pick<...>): Element'，出现以下错误。 输入'孩子：字符串；组件：可覆盖组件>；到：字符串；类型：字符串；全宽：真；变体：“包含”；颜色：“主要”；类名：字符串； onClick: () => 无效； ' 不能分配给类型 'IntrinsicAttributes & href: string; & 孩子？：反应节点；颜色？：颜色；禁用？：布尔值； disableElevation?：布尔值； disableFocusRipple?: 布尔值； ... 5 更多 ...;变种？：“文本”| ... 1 更多 ... | “包含”； & ...; & CommonProps<...> & Pick<...>'。 'IntrinsicAttributes & href: string; 类型上不存在属性'组件' & 孩子？：反应节点；颜色？：颜色；禁用？：布尔值； disableElevation?：布尔值； disableFocusRipple?: 布尔值； ... 5 更多 ...;变种？：“文本”| ... 1 更多 ... | “包含”； & ...; & CommonProps<...> & Pick<...>'。 重载 2 of 3, '(props: component: OverridableComponent>; & children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; ... 6 more ...; variant?: "text" | ... 1 more ... | "contained"; & ...; & CommonProps<...> & Pick<...>): Element'，给出了以下错误。 类型“字符串”不可分配给类型“从不”。 重载 3 个，共 3 个，'(props: DefaultComponentProps>>): Element'，给出了以下错误。 输入'孩子：字符串；组件：可覆盖组件>；到：字符串；类型：“提交”；全宽：真；变体：“包含”；颜色：“主要”；类名：字符串； onClick: () => 无效； ' 不可分配给类型 'IntrinsicAttributes & children?: ReactNode;颜色？：颜色；禁用？：布尔值； disableElevation?：布尔值； disableFocusRipple?: 布尔值； endIcon?：反应节点； ... 4 更多 ...;变种？：“文本”| ... 1 更多 ... | “包含”； & ...; & CommonProps<...> & Pick<...>'。 类型“IntrinsicAttributes & children?: ReactNode;”上不存在属性“组件”颜色？：颜色；禁用？：布尔值； disableElevation?：布尔值； disableFocusRipple?: 布尔值； endIcon?：反应节点； ... 4 更多 ...;变种？：“文本”| ... 1 更多 ... | “包含”； & ...; & CommonProps<...> & Pick<...>'。

【问题讨论】：

您是否导入了注册组件？

是的，我忘了包含在代码示例中，让我编辑

【参考方案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>

你说反应，你想把一个按钮渲染为一个 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 你想将你的 Button 渲染为来自 react-router-dom 的 RouterLink。这个链接现在确实有一个像你习惯的那样的道具。

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

【讨论】：

您好，我尝试按照您的建议进行操作，但错误仍然存​​在

@M.Ng 您是否尝试过使用 component=RouterLink 的示例？

是的，我按照你的例子

@M.Ng 尝试升级 material-ui，这可能是他们打字时的错误，因为上面的示例适用于我的代码 (material-ui 4.9.13) ***.com/questions/59494907/…

"@material-ui/core": "^4.10.2", "@material-ui/icons": "^4.9.1"，你指的是哪个材质ui？跨度>

【参考方案2】：

你能改变你的路由并尝试像这样定义路由吗？我希望它会有所帮助

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