What is the correct interface for NavLink isActive?

user_14549200 0
Viewed 1559

I created a "dumb" component with NavLink and I'm creating the interface for his props, however when inserting isActive in my interface to pass the props he complains.

I would like to know what is the correct interface to add to isActive, remembering that this component is "dumb" and will be reused, so that its parents will pass a function into isActive.

NAVLINK COMPONENT INTERFACE:

interface ITextLinkProps {
    to: string;
    exact: boolean;
    children: React.ReactChild | React.ReactChild[];
    style?: CSSProperties;
    activeStyle?: React.CSSProperties;
    'aria-current': boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';
    isActive?: (match: any, location: any) => {};
    onMouseOver?: MouseEventHandler<HTMLAnchorElement>;
    onMouseLeave?: MouseEventHandler<HTMLAnchorElement>;
}

ERROR:

Type '{ children: ReactChild | ReactChild[]; to: string; exact: boolean; style?: CSSProperties | undefined; activeStyle?: CSSProperties | undefined; 'aria-current': boolean | ... 6 more ... | "date"; isActive?: ((match: any, location: any) => {}) | undefined; onMouseOver?: MouseEventHandler<...> | undefined; onMouseLeave?...' is not assignable to type 'NavLinkProps<unknown>'.
  Types of property 'isActive' are incompatible.
    Type '((match: any, location: any) => {}) | undefined' is not assignable to type '(<Params extends { [K in keyof Params]?: string | undefined; }>(match: match<Params> | null, location: Location<unknown>) => boolean) | undefined'.
      Type '(match: any, location: any) => {}' is not assignable to type '<Params extends { [K in keyof Params]?: string | undefined; }>(match: match<Params> | null, location: Location<unknown>) => boolean'.
        Type '{}' is not assignable to type 'boolean'.  TS2322

I already tried to add the own interface of this property which is:

isActive?<Params extends { [K in keyof Params]?: string }>(match: match<Params> | null, location: H.Location<S>): boolean;

But typescript starts to accuse import errors:

match' refers to a value, but is being used as a type here. Did you mean 'typeof match'?  TS2749

     9 |    'aria-current': boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';
    10 |    isActive?<Params extends { [K in keyof Params]?: string }>(
  > 11 |        match: match<Params> | null,
       |               ^
    12 |        location: H.Location<S>
    13 |    ): boolean;
    14 |    onMouseOver?: MouseEventHandler<HTMLAnchorElement>;
react-router typescript reactjs
2 Answers

The proper type is NavLinkProps.

import { NavLink, NavLinkProps } from 'react-router-dom';

const CustomNavLink = (props: NavLinkProps) => <NavLink {...props} />

If you want to extend the default interface you can do something like

import { NavLink, NavLinkProps } from 'react-router-dom';

interface ITextLinkProps extends NavLinkProps {
  customProp: string;
}

const CustomNavLink = (props: ITextLinkProps) => <NavLink {...props} />

Ensure your isActive prop returns a boolean:

isActive={() => {
  return true;
}}
user_153048140

It looks like your return type is incorrect. You want (match: any, location: any) => boolean.
You can see it in the last line of the error:

        Type '{}' is not assignable to type 'boolean'.  TS2322

You might also try using the props directly: NavLinkProps<unknown>["isActive"].

user_67898160
Related