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

Question

我试图在单击按钮时重定向到注册页面，但是，我收到“没有重载匹配此调用错误”。我尝试用谷歌搜索该错误，但它似乎很广泛，而且我是 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<...>'。

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>

你说反应，你想把一个按钮渲染为一个 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>。

Answer 2

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

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