在特定路线上隐藏组件 - Reactjs答案

【问题标题】：Hide Component on specific route - Reactjs在特定路线上隐藏组件 - Reactjs
【发布时间】：2019-02-14 12:51:55
【问题描述】：

我有一个组件，其中路由定义如下。

return ((
  <ConnectedRouter history={history}>
    <div>
    <Header />
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/login" render={ () => (token && <Redirect to={{
        pathname: '/dashboard'
      }}/>) || <Login />}
      />
      <Route path="/logout" render={ () => !token && <Login />} />
      <PrivateRoute path="/dashboard" component={Dashboard}  { ...this.props }/>
    </Switch>
    </div>
  </ConnectedRouter>
));

使用这种方法，header 组件将在所有页面上呈现。

但我不希望标题显示在主页或登录页面上。

我发现解决这个问题的唯一方法是从上面的代码中删除标题并在每个组件中单独调用标题组件。

有没有其他方法可以根据上述方法隐藏特定页面的 Header 组件？

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以添加一个额外的 Switch 组件，它不会为 / 和 /login 路由呈现任何内容，但会为所有其他路由呈现 Header 组件。

return (
  <ConnectedRouter history={history}>
    <div>
      <Switch>
        <Route exact path="/" />
        <Route path="/login" />
        <Route path="/" component={Header} />
      </Switch>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route
          exact
          path="/login"
          render={() =>
            token ? (
              <Redirect
                to={{
                  pathname: "/dashboard"
                }}
              />
            ) : (
              <Login />
            )
          }
        />
        <Route path="/logout" render={() => !token && <Login />} />
        <PrivateRoute path="/dashboard" component={Dashboard} {...this.props} />
      </Switch>
    </div>
  </ConnectedRouter>
);

【讨论】：