remix-run/react-routerのversion5.3(from version 5.2)におけるコードの変更点

remix-run/react-routerをversion5.2 から version5.3 での変更する箇所。ネクストversionでの対応した方がいい箇所のまとめ。

Breaking Change

none...(まぁ、Minor Changeやし)

Suggest Change

activeClassName, activeClassNameをBC予定になるので、5.3に変更するタイミングであげておきませう。
Element.ariaCurrentでfalse対応ができるようになりました。

1. activeClassName, activeClassNameをBC予定になるので、5.3に変更するタイミングであげておきませう。

className props が定義された関係でそっちを利用するように徐々に移行しましょう。
6.Xのリリースタイミングでremoveされるので対応を実施。(file)

nav-ink-changed.jsx

// Good
function Comp() {
  return (
    <NavLink
      to="/"
      className={isActive =>
        `px-3 py-2 ${isActive ? 'text-gray-200' : 'text-gray-800'}`
      }
    >
      Home
    </NavLink>
  );
}

// Not Good activeStyle will duplicate
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: "bold",
    color: "red"
  }}
>
  FAQs
</NavLink>

// Not Good activeClassName will duplicate
<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

2. Element.ariaCurrentでfalse対応ができるようになりました。

nav-ink-changed.jsx

<NavLink aria-current="false"></NavLink>

他の変更箇所については、Projectのコード変更外のため明記をさけます。(ざっくりと)

travis.ymlの脱却 -> github actionsへ
babel関係のファイルのアップデート
.github/XXXのファイルの命名規則
useContextを利用したSample Codeに変更
ReadMe群のアップデート(ちょっと読みやくなった)
publish script の変更
Sample Codeでの命名規則の変更(key, contextという変数名ではなくpathname, XXXContextに変更)