Как использовать разные заголовки для разных компонентов в реакции - PullRequest
Новая
       26

Как использовать разные заголовки для разных компонентов в реакции

0 голосов
/ 10 мая 2019

Это мой основной файл 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

1 Ответ

1 голос
/ 10 мая 2019

Возможное решение вашей проблемы может состоять в том, чтобы явно определить, какие компоненты должны быть отображены внутри Маршрута.Но я не думаю, что это лучший подход, который вы могли бы использовать. 

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

Другое решение, о котором я подумал, могло бы заключаться в том, чтобы включить заголовок внутри компонента 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
...