javascript - 如何在react中为不同的组件使用不同的 header

Question

这是我的主 app.js 文件，包含所有路由。现在有两个 Header 组件。现在我需要使用 Header1仅包含 MyProfile 和 Home 组件以及包含 Marketing 的 Header2。我怎样才能用最好的方法做到这一点？

const App = (props) => (
  <Provider store={store}>
    <Layout>
      <Header1 {...props}/>
      <Header2 {...props}/>
      <Router>
        {/*<PrivateRoute path="/app/profile" component={Profile} />*/}   
        <Marketing path="/app" {...props}/>
        <PrivateRoute  path="/app/my-profile" component={MyProfile} location={props.location}/>
        <PrivateRoute  path="/app/home" component={Home} location={props.location}/>
      </Router>
    </Layout>
  </Provider>
)

export default App

Answer 1

解决您的问题的一个可能的解决方案可能是显式定义哪些组件需要在路由内呈现。但我认为这不是您可以采取的最佳方法。

<Route path='/app/my-profile' render={ props =>
  <>
    <Header1 {...props} />
    <MyProfile />
  </>
} />

我想到的另一个解决方案可能是将 header 包含在 MyProfile 组件中。在我看来，这是更优雅的方式。因此，您的 App.js 将仅包含路由路径，而您的组件将处理它们包含的内容:

const App = (props) => (
  <Provider store={store}>
    <Layout>
      <Router> 
        <Marketing path="/app" {...props}/>
        <PrivateRoute  path="/app/my-profile" component={MyProfile} location={props.location}/>
        <PrivateRoute  path="/app/home" component={Home} location={props.location}/>
      </Router>
    </Layout>
  </Provider>
)

export default App

您的 MyProfile 组件可能如下所示:

const MyProfile = (props) => (
  <>
      <Header1 {...props}/>
      <p>This is my profile</p>
  </>
)

export default MyProfile