跳到主要内容

Solid Router

如果只看 Solid 本体，会觉得它像一个高性能 UI 库。把 Solid Router 接进来之后，才更像一套可落地的应用方案。

Router 在负责什么​

  • 页面组织
  • 嵌套路由
  • 导航
  • 参数和查询读取
  • 预加载
  • 路由级布局

最基础的结构​

import { Route, Router } from '@solidjs/router'

<Router>
  <Route path="/" component={Home} />
  <Route path="/users/:id" component={UserDetail} />
</Router>

A 组件​

Solid Router 使用自己的链接组件。

import { A } from '@solidjs/router'

<A href="/dashboard">Dashboard</A>

嵌套路由​

布局和子页面可以自然组合，这一点和现代 React Router、Vue Router 的思路比较接近。

预加载​

路由切换前预取资源，是这套体验里很实用的一块。真实项目里，列表进详情、控制台切换、多面板页面都会受益。

路由这块最需要注意什么​

Solid Router 的语法不难，真正要适应的是它和 Solid 响应式模型的配合方式。参数、资源、布局、懒加载这些东西组合在一起时，思路和 React 生态仍然有些不同。