Question

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

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组件？

Answer 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>
);

隐藏特定路线上的组件-React.js

1 个答案: