如何解析'<navlink classname="{({" isactive })> 活跃？ “红色”：“蓝色”} /&gt;'？</navlink>

Question

I think I understand why the first instance of isActive that's passed as an argument to the arrow function is encapsulated in curly brackets, ie { isActive } , while the second isActive is not encapsulated in curly brackets, but would like to be sure I understand correctly. Is the first "isActive" that's encapsulated in curly brackets ie, ({ isActive }) an example of Object Destructuring? (If not, doesn't an arrow function in JS expect to receive the name of a variable, but doesn't { isActive } evaluate to true or false ?)

Many thanks in advance if anyone can please confirm whether this is an example of Object Destructuring. Or if I've got this wrong, then many thanks if you can please explain!

Answer 1

Your understanding is right. react-router v6 has changed the NavLink API a bit. You need to provide the isActive wrapped in an object as opposed to in NavLink v5 .

export interface NavLinkProps
  extends Omit<LinkProps, "className" | "style" | "children"> {
  children:
    | React.ReactNode
    | ((props: { isActive: boolean }) => React.ReactNode);
  caseSensitive?: boolean;
  className?: string | ((props: { isActive: boolean }) => string | undefined);
  end?: boolean;
  style?:
    | React.CSSProperties
    | ((props: { isActive: boolean }) => React.CSSProperties);
}