【React】react-router-domrのprops.history.pushとurl直打ちのパスのマッチの仕方の違いについて

Question

前提

reactrouter-domを用いて以下の様にルーティングを定義？しています。

<Switch>
  <Route exact path='/articles/index' component={IndexArticlesComponent} />
  <Route exact path='/articles/:id' component={ShowArticleComponent} />
</Switch>

「/articles/index」ページは記事の検索結果であり、検索欄が付いています。
もしこのページに到達した際にクエリストリングが付いていれば、その内容を初期の検索条件とする様になっています。

問題

別のページから以下のコードを用いて「/articles/index」を表示させようとした時に、「/articles/:id」の方にマッチ（=ShowArticleComponentを表示）してしまいます。

props.history.push({
  pathname: '/articles/index?articleTitle=HowToReact'
});

問題補足

'/articles/index?articleTitle=HowToReact'というパスを指定して以下の3パターンによって遷移を行う場合はちゃんと（というか意図した通り）「/articles/index」ページにいってくれます。

• URL直打ち
• react-router-domのLinkコンポーネントを使う
• aタグを使う

質問

なぜこの様な違いが出るのでしょうか？
pushの場合とurl指定のリンクの場合でマッチの仕様が異なるのでしょうか？

また、解決の方法についても妙案があれば賜りたく存じます、、、、

質問補足

• articles/indexには各所からリンクが貼られており、クエリストリングから条件を取得する仕様は変えたくありません。

つまり、props.history.push時にパラメータをjsonのまま渡して、articles/indexで受け取るのはやりたくないです、、、

大変お手数ですがどなたかお力添え頂けたら幸いです！

Answer 1

push の引数に URL 文字列をそのまま渡すか、

props.history.push('/articles/index?articleTitle=HowToReact');

location オブジェクト を渡せば良いようです。

props.history.push({
  pathname: '/articles/index',
  search: '?articleTitle=HowToReact'
});

Comments

[退会済みユーザー]

わああああ！ありがとうございます！
言われてみれば確かに、、、という感じです。
申し訳ありません、、、、