javascript - Typescript Routing Error - No overload matches this call

I am trying to redirect to a sign up page when a button is clicked, however, I am receiving a 'no overload matches this call error'. I tried to Google the error however it seems quite broad and I am new to Typescript so unsure how to fix it.

How should I fix the error and how should i display the sign up form when the button is clicked?

// 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 ponent= { 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")
);

This is the error message I am receiving:

TS2769: No overload matches this call. 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', gave the following error. Type '{ children: string; ponent: OverridableComponent>; to: string; type: string; fullWidth: true; variant: "contained"; color: "primary"; className: string; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; ... 5 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'. Property 'ponent' does not exist on type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; ... 5 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'. Overload 2 of 3, '(props: { ponent: OverridableComponent>; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; ... 6 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error. Type 'string' is not assignable to type 'never'. Overload 3 of 3, '(props: DefaultComponentProps>>): Element', gave the following error. Type '{ children: string; ponent: OverridableComponent>; to: string; type: "submit"; fullWidth: true; variant: "contained"; color: "primary"; className: string; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'. Property 'ponent' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'.

How should I fix the error and how should i display the sign up form when the button is clicked?

// 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 ponent= { 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")
);

This is the error message I am receiving:

Share Improve this question edited Jun 20, 2020 at 7:35 asked Jun 20, 2020 at 7:31 M.Ng 651 gold badge4 silver badges11 bronze badges

have you imported SignUp ponent? – Sudhanshu Kumar Commented Jun 20, 2020 at 7:32
yes I have, i forgot to include in code sample, let me edit – M.Ng Commented Jun 20, 2020 at 7:35

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

This is an exeption of material-ui and it means that your ponent uses props that it's not supposed to have.

If you do this:

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

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

You say react, that you want to render a Button as a Material-Ui Link. The problem is, that the Material Ui Link https://material-ui./api/link/ does not have a "to" prop. therefore you get the exception.

If you use React Router, change your code like this:

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

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

If you do this, you tell React that you want to render your Button as a RouterLink from react-router-dom. This Link now does have a to prop like you're used to.

Alternatively you could use the "href" prop from the material-ui Link Component but that would mess up with your routing since this would render a normal <a href=""></a> instead of a React-Router <Link>.

Can you change your routing and try defining route like this i hope it will help

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Typescript Routing Error - No overload matches this call - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)