How to make this type script compatible from react tutorial?

user_517781 0
Viewed 119

This has quite a few errors when using in type script

import { useLocation, NavLink } from "react-router-dom";

function QueryNavLink({ to, ...props }) {
  let location = useLocation();
  return <NavLink to={to + location.search} {...props} />;
}

TS7031: Binding element 'to' implicitly has an 'any' type.
TS2741: Property 'children' is missing in type '{ to: string; }' but required in type 'NavLinkProps'.

I am not quite sure how to resolve this? thanks, Dean

react-router-dom react-router typescript
1 Answers

This part of the React Router tutorial demonstrates how to compose a <NavLink> to add a custom behaviour, that simply "persists" the URL search params.

In that case, the props are the same as the NavLink, so you could type them the same as well:

function QueryNavLink({ to, ...props }: NavLinkProps) {
  let location = useLocation();
  return <NavLink to={to + location.search} {...props} />;
}
user_51087960
Related