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<...>'.
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>
.
Can you change your routing and try defining route like this i hope it will help
<Route path="/signup" component={SignUp} />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.