Contents
やりたかったこと
- 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}"></di
</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を埋め込んでしまったせいでした．
これで時間をとってしまったので，皆さんもお気をつけください！
refernce
- https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#スイッチ文
- https://itsakura.com/thymeleaf-if-loop
- https://miruraku.com/java/thymeleaf/if/
