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対応ができるようになりました。