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, i.e. { 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 i.e., ({ 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?)
Am I right that this is an example of Object Destructuring?
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);
}