Typescript 路由错误 - 没有与此调用匹配的过载

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：没有重载匹配此调用。 Overload 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; } & { 孩子？：反应节点； 颜色？：颜色； 禁用？：boolean； 禁用高程？：boolean； 禁用FocusRipple？：boolean； ... 5 更多...; 变体？：“文本”|... 1 更多... | “包含”； } & {...; } & CommonProps<...> & Pick<...>'。 'IntrinsicAttributes & { href: string; 类型上不存在属性'组件' } & { 孩子？：反应节点； 颜色？：颜色； 禁用？：boolean； 禁用高程？：boolean； 禁用FocusRipple？：boolean； ... 5 更多...; 变体？：“文本”|... 1 更多... | “包含”； } & {...; } & CommonProps<...> & Pick<...>'。 重载 2 of 3, '(props: { component: OverridableComponent>; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; ... 6 更多...; 变体？： "text" |... 1 more... | "contained"; } & {...; } & CommonProps<...> & Pick<...>): Element'，给出了以下错误。 类型“字符串”不可分配给类型“从不”。 重载 3 个，共 3 个，'(props: DefaultComponentProps>>): Element'，给出了以下错误。 输入'{孩子：字符串； 组件：可覆盖组件>； 到：字符串； 类型：“提交”； 全宽：真； 变体：“包含”； 颜色：“主要”； 类名：字符串； onClick：（）=>无效； }' 不可分配给类型 'IntrinsicAttributes & { children?: ReactNode; 颜色？：颜色； 禁用？：boolean； 禁用高程？：boolean； 禁用FocusRipple？：boolean； endIcon?：反应节点； ... 4 更多...; 变体？：“文本”|... 1 更多... | “包含”； } & {...; } & CommonProps<...> & Pick<...>'。 类型“IntrinsicAttributes & { children?: ReactNode;”上不存在属性“组件” 颜色？：颜色； 禁用？：boolean； 禁用高程？：boolean； 禁用FocusRipple？：boolean； 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>

您说反应，您想将 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} />