路由

声明路由，在当前窗口中渲染匹配结果，并用链接或 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，文本才会保持最新。