TanStack Router 嵌套路由配置实践指南

嵌套路由的核心概念

TanStack Router 是一个功能强大的前端路由解决方案，它提供了灵活的嵌套路由配置能力。嵌套路由是现代前端应用中常见的模式，它允许我们在父路由下定义子路由，形成层次化的页面结构。

常见问题场景

在实际开发中，开发者经常遇到这样的困惑：当访问子路由时，父路由的组件内容仍然会显示。这与 Vue Router 等框架的行为有所不同，容易造成混淆。

解决方案剖析

正确配置子路由路径

在 TanStack Router 中，子路由的路径配置需要特别注意。正确的做法是：

const homeChildRoute = createRoute({
  getParentRoute: () => homeRoute,
  path: 'child',
}).lazy(() => import('./home/homeChild').then((d) => d.HomeChild));

这里的关键点在于：

1. 使用 getParentRoute 明确指定父路由
2. 子路由的 path 只需写相对路径，不需要包含父路由路径

路由出口(Outlet)的控制

关于父组件内容显示的问题，这实际上与路由出口(Outlet)的放置位置有关：

1. 全局单一出口模式：如果将 Outlet 放在全局布局组件中，那么所有路由都会共用这个出口
2. 分层出口模式：如果在父路由组件中也放置 Outlet，就会形成嵌套的渲染结构

如果希望子路由完全替换父路由内容，应该：

1. 不在父路由组件中放置 Outlet
2. 确保子路由配置正确
3. 在全局布局中只保留一个顶层 Outlet

最佳实践建议

1. 明确路由层次：清晰地规划路由的父子关系
2. 谨慎使用 Outlet：只在需要嵌套渲染的地方使用
3. 路径配置规范：子路由使用相对路径，避免冗余
4. 路由懒加载：合理使用 lazy 加载提升性能

常见误区

1. 路径重复：在子路由中重复包含父路由路径
2. Outlet 滥用：在不必要的地方放置多个 Outlet
3. 组件结构混乱：没有清晰区分布局组件和内容组件

通过理解这些核心概念和配置要点，开发者可以更好地利用 TanStack Router 构建复杂的嵌套路由应用，避免常见的配置错误和渲染问题。