Question

在我的App.js中，我有以下功能：

render() {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Header />
          <Alerts />
          <Switch>
            <Route exact path="/" component={Landing} />
            <Route exact path="/signup" component={Signup} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/profile" component={Profile} />
            <Route path="/:folderName" component={Business} />
          </Switch>
        </div>
      </BrowserRouter>
    </div>
  );
}

我想要做的是渲染组件，仅在前4个路由上，而不是在/：folderName路由中。我可以将Header放在每个Landing，Signup，Login和Profile路径中，但我觉得必须有更好的方法。我也可以使用render =而不是component = like so：

<Route exact path="/" render={() => (
                  <Fragment>
                    <Header />
                    <Landing />
                  </Fragment>
                )}
/>

但是有更好的方法吗？我可以在要呈现的标题中有条件吗？

由于

Answer 1

Antonio Pangallo的评论建议使用HOC确实效果最好。这是我的Switch现在的样子：

render() {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Switch>
            <Route exact path="/" component={withHeaderAndAlerts(Landing)} />
            <Route exact path="/signup" component={withHeaderAndAlerts(Signup)} />
            <Route exact path="/login" component={withHeaderAndAlerts(Login)} />
            <Route exact path="/profile" component={withHeaderAndAlerts(Profile)} />
            <Route path="/:folderName" component={Business} />
          </Switch>
        </div>
      </BrowserRouter>
    </div>
  );
}

使用Header和Alerts包装组件的功能：

//HOC to wrap component in the Header and Alerts components
function withHeaderAndAlerts(WrappedComponent) {
  class withHeaderAndAlerts extends React.Component {
    render() {
      return (
        <Fragment>
          <Header />
          <Alerts />
          <WrappedComponent />
        </Fragment>
      );
    }
  }

  withHeaderAndAlerts.displayName = `withHeaderAndAlerts(${getDisplayName(WrappedComponent)})`;
  return withHeaderAndAlerts;
}

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || "Component";
}

谢谢安东尼奥！

BrowserRouter上组件的条件渲染

1 个答案: