React Router中嵌套<Switch>组件是否属于反模式？

完全不是反模式！实际上这是React Router官方明确允许且非常推荐的路由组织与代码拆分方式，特别适合处理大型应用中路由规则繁多的场景。

React Router官方文档里也明确提到了这一点：

<Switch>的所有子元素都应该是<Route>或<Redirect>元素，只有第一个匹配当前路径的子元素会被渲染。不过，嵌套<Switch>语句是被允许的。

你提到的这种拆分方式非常合理——把不同路径前缀的路由规则拆分到独立的子路由组件（比如FooRouter、BarRouter）中，能让代码结构更清晰，维护起来也更轻松。举个完整的例子：

// 根路由组件
import { Switch, Route } from 'react-router-dom';
import FooRouter from './FooRouter';
import BarRouter from './BarRouter';
import BazRouter from './BazRouter';

const RootRouter = () => (
  <Switch>
    <Route path="/foo" component={FooRouter} />
    <Route path="/bar" component={BarRouter} />
    <Route path="/baz" component={BazRouter} />
    {/* 全局404路由 */}
    <Route component={GlobalNotFound} />
  </Switch>
);

// FooRouter 子路由组件
const FooRouter = () => (
  <Switch>
    <Route exact path="/foo" component={FooHome} />
    <Route path="/foo/detail/:id" component={FooDetail} />
    <Route path="/foo/settings" component={FooSettings} />
    {/* 仅针对/foo路径下的404页面 */}
    <Route component={FooNotFound} />
  </Switch>
);

这种嵌套<Switch>的模式还有几个明显优势：

• 模块化：每个子路由模块只负责对应路径前缀下的规则，职责单一，符合代码设计的单一职责原则
• 可维护性：修改某一块路由规则时，不需要在根路由的一堆代码里找，直接去对应的子路由组件修改即可，降低出错概率
• 隔离性：子路由里的专属404页面、路由守卫等逻辑，只会作用于当前路径前缀下的路由，不会干扰全局路由

内容的提问来源于stack exchange，提问作者cheshireoctopus