[Bug]: useNavigate, <Link> and <Navigate> 'to' types

[KKaldis]

What version of React Router are you using?

6.3.0

Steps to Reproduce

i want to navigate to previous hisotry url (-1)

onClick={() => navigate(-1 as string | number)}
onClick={() => navigate(-1 as string)}
onClick={() => navigate(-1 as number)}

it does work even with type error

Expected Behavior

accept both number | string

Actual Behavior

on useNavigate

No overload matches this call.
Overload 1 of 2, '(to: To, options?: NavigateOptions | undefined): void', gave the following error.
Argument of type 'string | number' is not assignable to parameter of type 'To'.
Type 'number' is not assignable to type 'To'.
Overload 2 of 2, '(delta: number): void', gave the following error.
Argument of type 'string | number' is not assignable to parameter of type 'number'.
Type 'string' is not assignable to type 'number'.ts(2769)

on <Navigate>

Type 'number' is not assignable to type 'To'.ts(2322)
index.d.ts(53, 5): The expected type comes from property 'to' which is declared here on type 'IntrinsicAttributes & LinkProps & RefAttributes'

[brophdawg11]

If you want to go back - useNavigate is the proper API which accepts a number:

interface NavigateFunction {
  (to: To, options?: NavigateOptions): void;
  (delta: number): void;
}

It doesn't work if you explicitly cast it to string | number since that union doesn't fit either of the overloads, but you can use To objects, strings, or numbers individually without issue:

It doesn't really make sense for <Navigate> to accept a number IMO because going back should only be in response to a user-action - whereas Navigate is intended for redirects. It wouldn't make sense to land somewhere jut to be routed backwards without taking any user action.

<Link> does not accept a number because when going back in the history stack there is no way to determine what URL you are going back to, so we cannot render a <a href>.

[PauloBarrantes]

@brophdawg11 Why is not possible to have the option to go back on the Link Component, something like this: <Link to={-1}

[brophdawg11]

<Link> does not accept a number because when going back in the history stack there is no way to determine what URL you are going back to, so we cannot render a <a href>.