📝

【Svelte】svelte-routingを使ってみたら思わぬところで躓いたのでメモ

2022/06/10に公開

Svelte

tech

はじめに

Svelteを使った個人開発をしていたところsvelte-routingの実装で躓いたのでメモします。この記事がどなたかのお役に立てましたら幸いです。

背景

ルーティングを実装をするに当たってどのライブラリを入れるか迷いました。どうやらトレンド的にはsvelte-routingが良さそうなのでこちらを採用しました（3月時点）

実装で躓いたところ

svelte-routingでページ遷移した後にリロードすると404エラーになる

こちらはsingleオプションの追加とhydrateオプションの追記をしないと発生する不具合のようなので右に倣えでとりあえず下記のように追加しました。

package.json

// ...
"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public -s" // 追加
  }
// ...

main.js

import App from './App.svelte';

const app = new App({
    target: document.body,
    hydrate: true // 追加
});

export default app;

しかし、これでも404エラーが発生します。調査してみるとSvelte3からmain.jsにhydrateオプションを追記するのではなくrollup.config.jsにhydrateオプションを追記する必要があるとのことでした。

改めて下記のように変更したところ解決しました。

rollup.config.js

// ...
svelte({
      preprocess: sveltePreprocess({
        sourceMap: !production,
      }),
      compilerOptions: {
        hydratable: true, // 追加
        dev: !production,
      },
    }),
// ...

svelte-routingはクエリパラメータをサポートしていない

2年前にも「クエリパラメータのサポートがないか？」のイシューが挙げられており解決策として「query-stringのパッケージを使って対応してね」と書かれていました。

ドキュメントにもクエリに関する記載は見当たらず、念の為svelte-routingのリポジトリでキーワード検索をかけてみましたがヒットせず、大人しくquery-stringを導入しました。

svelte-routingを使ってリダイレクトをさせるには？

リダイレクトするためにnavigateをsvelte-routingは用意しています。

<script>
  import { navigate } from "svelte-routing";

  function onSubmit() {
    login().then(() => {
      navigate("/success", { replace: true });
    });
  }
</script>

「navigateがリダイレクトだ」とドキュメントに明記はなかったのですが、こちらでリダイレクトの挙動をしているので取り上げました。認識が違っていたらすみません。

さいごに

今までVue.jsやReactを使ってきてルーティングの実装に困ることはなかったのですが、Svelte自体の実装例やドキュメントが少なかったりと思わぬところで実装に詰まりました。

今回はsvelte-routingについて取り上げましたが、6月に入った時点でsvelte-spa-routerがトレンド１位になっているのでSvelteで開発を進めようと思っている方はそちらの検討もしてみると良いかもしれません。