在 React 中使用空列有什么意义？答案

【问题标题】：What is the point of using an empty column in React?在 React 中使用空列有什么意义？
【发布时间】：2020-10-09 18:45:09
【问题描述】：

我无法让这段代码运行，所以我试图通过查看它来弄清楚它的作用。那么，有人可以向我解释这里发生了什么吗？哪里有两列但一列是空的？

另外，我认为无论触发什么路由，内容都会显示在第 2 列中，这是否正确？ Routes 组件只是一个带有大量 Routes 的 Switch。

    <BrowserRouter>
      <NavigationBar />
      <Route exact path="/" component={LoginComponent} />
      <Container fluid="true">
        <Row>
          <Col xs={0} sm={0} md={0} lg={0} xl={1} />
          <Col xs={12} sm={7} md={8} lg={9} xl={8}>
            <Alert />
            <Route component={Routes} />
          </Col>
          <UserPanel />
        </Row>
      </Container>
    </BrowserRouter>

【问题讨论】：

标签： reactjs react-router react-component

【解决方案1】：

在 React 中使用空列有什么意义？

显然，当屏幕尺寸特别大时，他们希望屏幕上有一些空白空间。

另外，我认为无论触发什么路由，内容都会显示在第 2 列中，这是否正确

从您对Routes 中代码的描述来看，这似乎是正确的。

【讨论】：

好的，谢谢，我知道这是一个非常愚蠢的问题。由于我无法让代码运行，我只需要确定。

【解决方案2】：

我的猜测是空 col 被用作 xl 屏幕上的占位符。您应该阅读源代码以了解组件的作用，然后您就可以理解而不是猜测重点。

至于您的第二个问题，react router docs 表示：

没有路径的路由总是匹配的。

因此，无论 Routes 组件渲染什么 - 它都会在任何给定路由上渲染。

【讨论】：