第八章：Routing —— 精细反应街区的道路系统 - 现代前后端完全指南：软件城市宇宙

SolidStart 的路由是文件路由。

它不只是“页面切换”，而是整片街区的道路规划图。

#1. 基础页面路由

text

src/routes/
├── index.tsx           → /
├── about.tsx           → /about
├── shops.tsx           → /shops
└── shops/
    └── [id].tsx        → /shops/:id

一个最基本的页面文件：

tsx

export default function AboutPage() {
  return <h1>关于这片街区</h1>;
}

#2. 在应用入口挂上文件路由

tsx

import { Suspense } from "solid-js";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";

export default function App() {
  return (
    <Router root={(props) => <Suspense>{props.children}</Suspense>}>
      <FileRoutes />
    </Router>
  );
}

这里有一个很 SolidStart 的味道：

路由组件默认懒加载
所以根布局通常会包 Suspense

#3. 动态路由

text

routes/users/[id].tsx       → /users/:id
routes/[...all].tsx         → 捕获剩余路径

在页面里拿参数：

tsx

import { useParams } from "@solidjs/router";

export default function UserPage() {
  const params = useParams();
  return <h1>用户 ID: {params.id}</h1>;
}

#4. 嵌套路由和布局

text

routes/
├── blog.tsx
└── blog/
    ├── index.tsx
    └── [slug].tsx

此时 blog.tsx 可以当 /blog/* 的布局文件：

tsx

import type { RouteSectionProps } from "@solidjs/router";

export default function BlogLayout(props: RouteSectionProps) {
  return (
    <section>
      <h1>街区公告栏</h1>
      {props.children}
    </section>
  );
}

#5. 路由脑图

text

街区道路系统
│
├── UI routes
│   ├── 页面
│   ├── 动态路段
│   └── 嵌套布局
│
└── API routes
    ├── GET
    ├── POST
    ├── PATCH
    └── DELETE