ルーティング / Learch

ルーティング

Web アプリケーションにおけるルーティングは、異なるページ間のナビゲーションを管理する重要な機能です。SolidJS では、solid-app-routerライブラリを使用して、効率的で宣言的なルーティングを実現します。このセクションでは、SolidJS でのルーティングの基本的な設定と使用方法について、具体例を通じて説明します。

solid-app-router のセットアップ

solid-app-router のインストール:
まず、solid-app-routerをプロジェクトにインストールします。ターミナルまたはコマンドプロンプトで以下のコマンドを実行してください。
```
npm install solid-app-router
```
ルーターのセットアップ:
solid-app-routerを使用するには、アプリケーションのルートコンポーネントでRouterコンポーネントをセットアップする必要があります。これにより、アプリケーション内でルーティングが有効になります。
src/App.jsを開き、以下のようにRouterコンポーネントをインポートして使用します。
```
import { Router, Routes, Route } from 'solid-app-router';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;
```
この例では、HomeとAboutの 2 つのページ用のルートを設定しています。それぞれのRouteコンポーネントは、特定のパスにマッチしたときに表示するコンポーネントを指定します。

ページコンポーネントの作成

ルーティングの設定を完了するためには、ナビゲーションに使用するページコンポーネントを作成する必要があります。以下に、HomeとAboutページの簡単な例を示します。

Home ページの作成:
src/pages/Home.jsファイルを作成し、以下のコードを追加します。
```
function Home() {
  return <div>Welcome to the Home Page!</div>;
}

export default Home;
```
About ページの作成:
src/pages/About.jsファイルを作成し、以下のコードを追加します。
```
function About() {
  return <div>Welcome to the About Page!</div>;
}

export default About;
```

ナビゲーションリンクの追加

ページ間でのナビゲーションを可能にするには、Linkコンポーネントを使用してナビゲーションリンクを追加します。

src/App.jsに戻り、ナビゲーションリンクを追加します。

import { Link } from 'solid-app-router';

function App() {
  return (
    <Router>
      <nav>
        <Link href='/'>Home</Link>
        <Link href='/about'>About</Link>
      </nav>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </Router>
  );
}

このコードでは、HomeページとAboutページへのリンクがナビゲーションバーに追加されています。ユーザーがこれらのリンクをクリックすると、対応するページコンポーネントが表示されます。

Solidリアクティブシステム

Solid状態管理