Requesting a type when sending a property in a link

user_14599611 0
Viewed 129

I am rewriting the project written in Javascript with Typescript. A type is requested in the state value sent to the link component and it throws an error. But I didn't know where to do this.

<S.Forgot>
      <Link to={{ pathname: "/forgot", state: { type: "merchant" } }}>
        Şifremi Unuttum
      </Link>
    </S.Forgot>

error

  Type '{ pathname: string; state: { type: string; }; }' is not assignable to type 'To'.
  Object literal may only specify known properties, and 'state' does not exist in type 'Partial<Path>'.ts(2322)
index.d.ts(53, 5): The expected type comes from property 'to' which is declared here on type 'IntrinsicAttributes & LinkProps & RefAttributes<HTMLAnchorElement>'
react-router-dom typescript reactjs
1 Answers

It appears you are using react-router-dom@6. For the Link component that state is a top-level prop, not a property on the to prop. Move state out on its own as a prop.

Example:

<S.Forgot>
  <Link to="/forgot" state={{ type: "merchant" }}>
    Şifremi Unuttum
  </Link>
</S.Forgot>

Route/Link state is still accessed via the location object.

const { state } = useLocation();
const { type } = state || {};
user_86908570
Related