Using Tag To Pass A Attribute Inside Navlink Reactstrap Component

Can someone help me to figure out what can be the significance of passing the Link tag inside the NavLink component like this :

Solution 1:

I believe it's a how they provide re-usability over the Link component coming from the react-router or maybe any other Link component you want to use! what we basically have is:

// react-router/Link
<Linkto="/about">About</Link>

What they have in NavLink:

<Tag {...attributes} ref={innerRef}onClick={this.onClick}className={classes} />

Where {...attributes} will be any other property other than: className, cssModule, active, tag, innerRef, because they are destructed from props.

So, The reason they did that.

1. They needed/provided onClick property for the Link component.
2. They have there own standard to styling stuff className={classes}

And, one of the most important things in React is it's Component's Re-usability, meaning, DRY principle is applied in this matter, because, Imagine you don't have the NavLink Component and you want to add a onClick prop for the Link component whenever it's needed, then you'll have to carry this around wherever you go:

  onClick(e) {
    if (this.props.disabled) {
      e.preventDefault();
      return;
    }

    if (this.props.href === '#') {
      e.preventDefault();
    }

    if (this.props.onClick) {
      this.props.onClick(e);
    }
  }

Shortening that: it's all for the sake of DRY Principle

Share