Router

QuickGUI コアのルーティングを QuickGUI UI に投影し、ネストされたレイアウトと上限付きメモリ履歴を提供します。

デモを読み込み中…

<Router initialPath="/">
  <Route path="/" component={Shell}>
    <Route path="/" component={Home} />
    <Route path="/projects/:id" component={Project} />
  </Route>
</Router>

#インポート

@quickgui/solid から Router をインポートします。

import { Router } from "@quickgui/solid";

#使い方

<Router initialPath="/">
  <Route path="/" component={Shell}>
    <Route path="/" component={Home} />
    <Route path="/projects/:id" component={Project} />
  </Route>
</Router>

#構成

Router
Route
Link
Outlet

<Router>
  <Route path="/" component={AppShell}>
    <Route path="/projects/:id" component={Project} />
  </Route>
  <Link href="/projects/quickgui">Open project</Link>
  <Outlet />
</Router>

#API リファレンス

項目を展開すると説明と完全なシグネチャが表示されます。ダッシュは宣言に既定値が記載されていないことを示します。

`Router`

ソースを見る

Router(props: RouterProps): JSX.Element

initialPathstring—

Initial memory-history destination. Defaults to `/`.

string

ソースを見る

fallbackJSX.Element—

Rendered when no declared route matches.

JSX.Element

ソースを見る

childrenJSX.Element—

Declares children (optional). Reactive JSX expressions update this property in place.

JSX.Element

ソースを見る