React中空列的作用是什么？请解析该路由布局代码并确认路由内容位置

关于“空列”的原因 #

你看代码里第一个<Col>的响应式属性：xs={0} sm={0} md={0} lg={0} xl={1}，这是Bootstrap栅格的适配技巧：

• 在**超小屏（手机，xs）、小屏（sm）、中屏（md）、大屏（lg）**这些常见设备尺寸下，这个列的宽度被设为0，相当于完全隐藏，肉眼看不到，所以看起来是空的
• 只有在**超大屏（宽度≥1200px的桌面显示器，xl）**时，这个列会占1份栅格宽度（Bootstrap栅格默认是12份），用来给内容区域旁边留出一点空白，避免内容贴满屏幕边缘，提升视觉舒适度

关于路由内容的显示位置 #

你的判断大部分是对的，但有个特殊情况：

• 当访问根路径/时，<Route exact path="/" component={LoginComponent} />会匹配，这时候LoginComponent是渲染在<Container>外面的，和第二列的内容是分开的（也就是说这时候页面会同时显示登录组件、NavigationBar，以及Container里的Alert和UserPanel）
• 对于其他所有路由，那个没有path属性的<Route component={Routes} />是兜底路由（没有path的Route会匹配任何路径），而Routes是包含大量Route的Switch——Switch只会渲染第一个匹配的路由，所以所有Routes里匹配到的组件都会渲染在第二个<Col>里面。也就是说，除了根路径的登录组件，其他所有路由内容都会显示在第二列中

另外补充个小细节：这个布局的固定结构是顶部始终显示NavigationBar，然后根据路径切换显示登录页，或者显示带侧边留白（仅超大屏）、内容区（第二列）和UserPanel的主布局，内容区里还会始终显示Alert组件。

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