Typescript Routing Error - No overload matches this call

Question

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 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")
);

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; component: 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 'component' 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: { component: 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; component: 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 'component' 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<...>'.

have you imported SignUp component?

Sudhanshu Rai
– Sudhanshu Rai

2020-06-20 07:32:58 +00:00
Commented Jun 20, 2020 at 7:32 — Sudhanshu Rai
– Sudhanshu Rai, Commented Jun 20, 2020 at 7:32
yes I have, i forgot to include in code sample, let me edit

M.Ng
– M.Ng

2020-06-20 07:35:08 +00:00
Commented Jun 20, 2020 at 7:35 — M.Ng
– M.Ng, Commented Jun 20, 2020 at 7:35

Tim Gerhard · Accepted Answer · 2020-06-20 07:44:29Z

4

This is an exeption of material-ui and it means that your component 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 component={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.com/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 component={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>.

answered Jun 20, 2020 at 7:44

Tim Gerhard

3,6272 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

M.Ng Over a year ago

Hi, I tried following your suggestion however the error is still there

Tim Gerhard Over a year ago

@M.Ng did you try the example with component={RouterLink}?

M.Ng Over a year ago

Yes, I followed your example

Tim Gerhard Over a year ago

@M.Ng try upgrading material-ui, this might be a bug in their typing because the above example works for my code (material-ui 4.9.13) stackoverflow.com/questions/59494907/…

M.Ng Over a year ago

"@material-ui/core": "^4.10.2", "@material-ui/icons": "^4.9.1", which material ui are you referring to?

|

Anku Singh · Accepted Answer · 2020-06-20 07:42:38Z

-3

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

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

answered Jun 20, 2020 at 7:42

Anku Singh

9546 silver badges12 bronze badges

Collectives™ on Stack Overflow

Typescript Routing Error - No overload matches this call

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related