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

Question

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

此外，我认为无论触发什么路由，内容都会显示在第 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>

Answer 1

What is the point of using an empty column in React?

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

Also, am I correct in thinking that whatever route is triggered, the content will show up within column 2

根据您对 Routes 中代码的描述，这似乎是正确的。

Answer 2

我的猜测是空列用作 xl 屏幕上的占位符。你应该阅读源代码来了解一个组件的作用，然后你就可以理解而不是猜测。

关于你的第二个问题，react router docs指出：

Routes without a path always match.

所以无论 Routes 组件呈现什么 - 它都会在任何给定的路线上呈现。

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

What is the point of using an empty column in React?

reactjs

react-router

react-component