How to make this type script compatible from react tutorial?-CodePudding

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

CodePudding user response：

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} />;
}