activeClassNameを使ってparamのマッチまで

Question

reactを使っています。

navbarは以下のようなNavLinkを持ったコンポーネントです。

作成： to="/projects/new"
一覧： to="/projects"
ヘルプ： to="/help"

また、プロジェクトを見るときに、URLのパスは"/projects/100"のような感じでアクセスします。
さて、このときに、"projects/:id"のときにも、「作成」をアクティブにしたいと考えています（ちょっとこの例だと変かもしれませんが、そういう設定ということにしてください）

この場合、どのようにactiveの設定をすれば良いのでしょうか。
paramまで考慮したactiveクラスの設定を行いたいということです。
自前で正規表現などで組むしかないのでしょうか？よろしくお願いします。

Comments

[karamarimo]

NavLink はおそらく react-router-dom のコンポーネントなので、質問文に書いておくべきだと思います。

Answer 1

NavLink - react-router

ここを見るとisActive prop を使うとできそうだとわかります。isActiveにセットした関数はmatchとlocationを受け取ってtrue/falseを返し、それによって active かどうかが決まります。

ここで、/projects/new か /projects/番号 のときアクティブにしたいわけですが、自分で正規表現を作って判定するのは怖いので、react-router-dom も内部で使用している path-to-regexp を使うのがいいと思いました。

Codesandbox Demo

const isNewProductActive = (match, location) => {
  const activePath = "/products/(new|\d+)"
  const re = pathToRegexp(activePath)
  return re.test(location.pathname)
}

// ...

            <li>
              <NavLink to="/products/new" activeClassName="link-active" isActive={isNewProductActive}>New Product /products/new</NavLink>
            </li>