はじめに

今回は業務でルーティングで躓いたので、それについて深掘りをしていきたいと思います。

react-router-domのルーティングで詰まった人の役に立てば幸いです。

TL;DL

ルーティングは上から行われていく。
上に/aboutがあると下の/about/1にアクセスしようとしたら/aboutに飛ぶ
それを避けるにはexactというプロパティを使用する

開発環境

ライブラリ	バージョン
React	17.0.2
typescript	4.1.5
react-router-dom	^5.3.0"

詳細

恐らくNextなどを使わずにReactで開発する時にルーティングのためにreact-router-domを使うことがしばしばあると思います。

その際、ただルーティングを書いても思った通りに動かないことがあります。

例えば以下のようなコードで/about/1にアクセスすると何が表示されるでしょうか？

デモはこちらから

<Switch>
  <Route path='/about'>
    <h1>aboutTop</h1>
  </Route>
  <Route path='/about/1'>
    <h1>about1</h1>
  </Route>
  <Route path='/'>
    <h1>top</h1>
  </Route>
</Switch>

この場合だとaboutが表示されます。

なぜなら/about/1にアクセスすると1番上の/aboutと重なり、そこでルーティング処理が終わってしまうからです。(部分一致)

これを避ける方法は2つあります。

対処法1

/about/1を/aboutより先に記述する。

こうすることで先に/aboutされる前にルーティングを行うことで回避できます。

<Switch>
  <Route path='/about/1'>
    <h1>about1</h1>
  </Route>
  <Route path='/about'>
    <h1>aboutTop</h1>
  </Route>
  <Route path='/'>
    <h1>top</h1>
  </Route>
</Switch>

対処法2

プロパティexactを使用する。

今回最も解説したかったのはこちらの方法です。

exactというプロパティを使用することで部分一致でもルーティングされていたものを完全一致でないとルーティングされないようにすることができます。

<Switch>
  <Route exact path='/about'>
    <h1>aboutTop</h1>
  </Route>
  <Route path='/about/1'>
    <h1>about1</h1>
  </Route>
  <Route path='/'>
    <h1>top</h1>
  </Route>
</Switch>;