eslint-plugin-no-link-component
This ESLint rule checks your JSX for components and outputs an error if it finds one. This will be useful if your team uses a wrapped version of React Router's Link component.
This is an example of using a wrapped Link component to handle app updates when a service worker is installed.
Installation
You'll first need to install ESLint:
$ npm i eslint --save-dev
Next, install eslint-plugin-no-link-component
:
$ npm install eslint-plugin-no-link-component --save-dev
Note: If you installed ESLint globally, you must also install eslint-plugin-no-link-component
globally.
Usage
Add no-link-component
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
Then add no-link-component
's only rule under the rules section.
Rule Details
This rule outputs an error to prevent usage of React Router's Link component (or any component named Link) throughout your app because you're using a wrapped/custom version of it.
The following patterns are considered warnings:
<Link to=`/users/` activeClassName="active">username</Link>
The following patterns are not warnings:
<CustomLink to=`/users/` activeClassName="active">username</CustomLink><UpdateLink to=`/users/` activeClassName="active">username</UpdateLink>
Note that you'll want to disable the rule in your CustomLink/UpdateLink definition:
/* eslint-disable consistent-return */