title: Typescript Routing Error - No overload matches this call
body: <p>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.</p>
  
  <p>How should I fix the error and how should i display the sign up form when the button is clicked?</p>
  
  <pre><code>// 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
      &lt;Button component= { Link } to="/signup" variant="contained" color="primary"&gt;Sign up!&lt;/Button&gt;
      // some stuff below
  }
  
  ReactDOM.render((
      &lt;BrowserRouter&gt;
          &lt;Switch&gt;
              &lt;Route path="/"&gt;
                  &lt;Main /&gt;
              &lt;/Route&gt;
              &lt;Route path="/signup"&gt;
                  &lt;SignUp /&gt;
              &lt;/Route&gt;
          &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;),document.getElementById("main")
  );
  
  </code></pre>
  
  <p>This is the error message I am receiving:</p>
  
  <p>TS2769: No overload matches this call.
    Overload 1 of 3, '(props: { href: string; } &amp; { 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"; } &amp; { ...; } &amp; CommonProps&lt;...> &amp; Pick&lt;...>): 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 &amp; { href: string; } &amp; { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; ... 5 more ...; variant?: "text" | ... 1 more ... | "contained"; } &amp; { ...; } &amp; CommonProps&lt;...> &amp; Pick&lt;...>'.
        Property 'component' does not exist on type 'IntrinsicAttributes &amp; { href: string; } &amp; { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; ... 5 more ...; variant?: "text" | ... 1 more ... | "contained"; } &amp; { ...; } &amp; CommonProps&lt;...> &amp; Pick&lt;...>'.
    Overload 2 of 3, '(props: { component: OverridableComponent>; } &amp; { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; ... 6 more ...; variant?: "text" | ... 1 more ... | "contained"; } &amp; { ...; } &amp; CommonProps&lt;...> &amp; Pick&lt;...>): 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 &amp; { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: "text" | ... 1 more ... | "contained"; } &amp; { ...; } &amp; CommonProps&lt;...> &amp; Pick&lt;...>'.
        Property 'component' does not exist on type 'IntrinsicAttributes &amp; { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: "text" | ... 1 more ... | "contained"; } &amp; { ...; } &amp; CommonProps&lt;...> &amp; Pick&lt;...>'.</p>