SolidStart 路由组中API路由失效问题解析

问题背景

在SolidStart框架的最新RC0版本中，开发者发现了一个关于文件系统路由的特殊问题：当API路由被放置在路由组文件夹（即使用括号命名的文件夹如(group)）中时，这些API端点会返回404错误。这个问题在之前的v3版本中是可以正常工作的。

问题复现

让我们通过一个简单示例来重现这个问题：

1. 创建一个新的SolidStart项目
2. 在/routes目录下创建apiget.tsx文件，内容如下：

export function GET() {
  return new Response("Hello World");
}

3. 访问/apiget端点可以正常工作
4. 将apiget.tsx移动到/routes/(group)/文件夹下
5. 再次访问/apiget端点会返回404错误

有趣的是，如果将文件内容改为常规组件形式，路由组中的页面路由却能正常工作：

export default function ApiGet() {
  return <div>常规组件在路由组中工作正常</div>;
}

技术分析

根据框架维护者的解释，这个问题源于0.5版本中对API路由处理的改动。原本API路由和页面路由是分开处理的，后来虽然恢复了统一处理的方式，但在路由组支持方面出现了正则表达式匹配的小错误。

这种设计变更带来了几个重要的技术考量点：

1. 路由解析顺序：API路由总是先于页面路由被解析，这意味着在共享作用域下使用通配符路由时可能会有意想不到的行为
2. 路由组隔离：路由组本应是一种纯粹的组织结构，不应该影响实际路由匹配
3. 向后兼容性：虽然框架推荐分离API和页面路由，但仍需保持对旧有模式的支持

解决方案

维护者已经确认这是一个bug，并会在后续版本中修复。在此期间，开发者可以采用以下临时解决方案：

1. 分离路由结构：为API路由创建独立的不包含路由组文件夹的目录结构
2. 手动调整匹配逻辑：在路由配置中硬编码API路由的匹配规则

不过需要注意的是，第一种方案可能会导致其他路由出现$GET属性读取错误，因此需要谨慎使用。

实际应用场景

以一个典型的应用为例：用户内容查看页面位于/viewer/userSlug，而用于SEO的缩略图获取端点位于/viewer/userSlug/thumb。其中：

• /thumb需要作为GET API端点，返回301重定向到实际图片
• /viewer/userSlug则通过多个布局和上下文的路由组进行处理

在当前版本中，这种架构会因为API路由在路由组中失效而无法正常工作。

最佳实践建议

虽然这个问题即将被修复，但从架构设计角度，我们建议：

1. 分离API和页面路由：即使技术上支持混合，也最好保持清晰的分离
2. 谨慎使用路由组：理解路由组仅用于组织结构，不影响实际路由匹配
3. 关注更新日志：及时了解框架路由系统的变更和优化

通过理解这些底层机制，开发者可以更好地规划项目结构，避免潜在的路由冲突问题。