Svelteでのルーティングの実装方法

1. Svelte Routing Libraryの使用: Svelteには、ルーティングを簡単に実装できるライブラリがいくつかあります。例えば、svelte-routingやnavaidといったライブラリがあります。これらのライブラリを使用すると、簡潔で柔軟なルーティングシステムを構築できます。以下は、svelte-routingを使用したコード例です。

import { Router, Link, Route } from 'svelte-routing';
import Home from './components/Home.svelte';
import About from './components/About.svelte';
const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};
export default App;

2. ルーティングの手動実装: もし、外部のルーティングライブラリを使わずに手動でルーティングを実装したい場合は、以下のようなコード例を参考にしてください。

import { onMount } from 'svelte';
const App = () => {
  let currentRoute = '';
  const navigate = (route) => {
    currentRoute = route;
    // ここでルートに基づいたコンポーネントの表示や処理を行う
  };
  onMount(() => {
    // 初期ルートの設定やルーティングの監視を行う
    // ルーティングの変更時にはnavigate関数を呼び出す
  });
  return (
    <div>
      <nav>
        <a href="/" on:click={() => navigate('/')}>Home</a>
        <a href="/about" on:click={() => navigate('/about')}>About</a>
      </nav>
      {/* ルートに基づいたコンポーネントの表示 */}
      {currentRoute === '/' && <Home />}
      {currentRoute === '/about' && <About />}
    </div>
  );
};
export default App;