ルーティング

ルートを宣言し、現在のウィンドウでマッチした結果を描画し、リンクまたは useNavigate で移動します。

#ルートの宣言

import { Router, Route, Link } from "@quickgui/solid/router";

<Router initialPath="/">
  <Route path="/" component={() => <Link href="/settings">Settings</Link>} />
  <Route path="/settings" component={() => <Text>Settings</Text>} />
  <Route path="/projects/:id" component={Project} />
</Router>

#入れ子のレイアウト

入れ子のルートは親からの相対パスです。次にマッチしたルートを置く場所に <Outlet /> を描画します。パスなしのルートは、URL セグメントを増やさずに共有レイアウトを提供できます。

<Route path="/" component={Shell}>
  <Route path="/" component={Home} />
  <Route path="/settings" component={Settings} />
</Route>

function Shell() {
  return (
    <View style={{ flexCol: true, gap: 12 }}>
      <Link href="/">Home</Link>
      <Link href="/settings">Settings</Link>
      <Outlet />
    </View>
  );
}

#ナビゲーション

const navigate = useNavigate();
<Button onClick={() => navigate("/projects/42")}>Open project</Button>
<Link href="/">Home</Link>

ルーターは push、replace、back、forward に対応しています。ナビゲーションはアプリ内で完結します。

#ルートパラメーター

function Project() {
  const params = useParams();
  return <Text>Project {params.id}</Text>;
}

useLocation() と useSearchParams() もリアクティブなオブジェクトを返します。テキストが最新のままになるよう、JSX 内で location.pathname と searchParams.tab を読みます。