reactjs - react中基于路由条件渲染组件

Question

您好，我如何根据路由有条件地渲染我的组件？

我的 app.js 的例子

const App = () => (
    <Container fluid>
        <Row>
          <Col lg="2">
            <Sidebar />
          </Col>
          <Col lg="10">
            <main>
              <Route exact path="/" component={Home} />
              <Route exact path="/login" component={Login} />
            </main>
          </Col>
        </Row>
    </Container>      
)

在这种情况下，如果路由是/login，我想隐藏我的侧边栏组件

标签： reactjs

Answer 1

您可以添加一个Switch不为/login路由呈现任何内容，但Sidebar为每个其他路由呈现的。

const App = () => (
  <Container fluid>
    <Row>
      <Col lg="2">
        <Switch>
          <Route path="/login" />
          <Route path="/" component={Sidebar} />
        </Switch>
      </Col>
      <Col lg="10">
        <main>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/login" component={Login} />
          </Switch>
        </main>
      </Col>
    </Row>
  </Container>
);