Edited at

react-routerの<Link> Componentでeslintのエラーが出るのを防ぐ

More than 1 year has passed since last update.


概要

react-routerの<Link> Componentはリンク先を決めるAttributeとしてhrefの代わりにtoを使う。

だが、eslintjsx-a11y/anchor-is-validプラグインを使っていると、hrefを使っていない事で怒られてしまう。


解決策

ルールを無効にする事も出来るが、それだと本来の<a>タグを使用する時に機能しなくなってしまうので、<Link> Componentを使う時は特別にtoをリンク先を決めるAttributeとして認める為のルールを.eslintrcに追加する。


eslintrc.js

module.exports = {

"rules": {
"jsx-a11y/anchor-is-valid": [ "error", {
"components": [ "Link" ],
"specialLink": ["to"]
}]
}
}


参考

jsx-a11y/anchor-is-validレポジトリのissue#340