Question

这是我的app.js主文件，包含所有路由。现在有两个Header组件。现在我需要使用Header1 仅包含MyProfile和Home组件，而Header2和Marketing。我该如何以最佳方式做到这一点？

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中呈现的组件。但是我认为这不是您可以采用的最佳方法。

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

我想到的另一种解决方案是将标头包含在MyProfile组件内。我认为这是更优雅的方法。因此，您的App.js仅包含Route路径，并且您的组件将照顾它们所包含的内容：

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

如何对React中的不同组件使用不同的Header

1 个答案: