React - adding className to Link component, ESLint error

Question

I'm using ESLint to lint my React app, and for a Link component with a className , I get the following warning:

error Prop 'className' is forbidden on Components react/forbid-component-props

I get what that's all about and I realize that I could just turn this rule off, but I'd rather do things the 'right' way...

This is my component -

<Link
    className="edit_link"
    to={`/user/${this.state.user.id}/edit`}>
    Edit
</Link>

and it all works as it should... but is there a best practice for this sort of situation? For components that I create, I can, of course, place className s on the outermost DOM node in the component, but how should that be handled for components link Link s?

Answer 1

According to this link . You can either turn this rule off or place the className on DOM nodes.

Answer 2

Which version of either React or React-router-dom are you using? Using className tag in the Link component works perfectly.

Just like this:

<Link to={this.props.link} className="whateverClassName">Home</Link>

Using 16.3.1 version for React and 5.1.2 version for React-router-dom .