Zenn
🐥

Thymeleafでth:switch / caseとth:replaceは同じタグで使えない

2023/06/16に公開
Spring
Thymeleaf
tech

やりたかったこと

  • ReactでRouteを使ってページの一部要素であるコンポーネントを切り替えるような処理をSpring + Thymeleafで実現したい
  • サーバのSpring側でpage変数に”index”, “page”を埋め込んでページを切り替えたい

やってみたこと

<div th:switch="${page}">
    <div th:case="'index'" th:replace="~{fragments/index :: index}"></div>
    <div th:case="'spot'" th:replace="~{fragments/spot :: spot}"></div>
</div>
  • サーバのSpring側で${page}に"index"もしくは"spot"を文字列として格納する
  • fragments/index.htmlとfragments/spot.htmlにはそれぞれ切り分けたコンテンツを格納している

実際には...

"index"が渡ってきても，"spot"がわかってきても両方のコンテンツが表示されてしまった...

解決してみた

同時に使うと読み込みと切り分けが上手く動作しないパターンかもしれないと思い，分けて書いてみることにしました！

<div th:switch="${page}">
    <div th:case="index">
    	<div th:replace="~{fragments/index :: index}"></div>
    </div>
    <div th:case="spot" >
    	<div th:replace="~{fragments/spot :: spot}"></div>
    </div>
</div>

ビンゴでした！
うまく動作しなかった理由はやはり同時にタグにth:caseとth:replaceを埋め込んでしまったせいでした．

これで時間をとってしまったので，皆さんもお気をつけください！

おまけ

今回初めて，Githubリポジトリとzennを組み合わせて，投稿してみます！
そのため，記事が適当ですみません！なにかミスってたらお優しいエンジニアの方教えてくれると嬉しいです！

refernce

Discussion