Передача данных между несвязанными компонентами в react ??

Question

[m_frost]

Есть часть страницы

<Header/>
<Switch>
<Route path={/componentOneURL} component={ComponentOne} />
<Route path={/componentTwoURL} component={ComponentTwo} />
</Switch>
<Footer/>

Это условная часть апки у нас тут Header Footer и элемент который грузиться при переходе на соответствующий раут
Надо менять состояние Header в зависимости от того, на который элемент в Switch мы перешли, для себя вывел 2 возможных варианта решения задачи:
1. спрятать Header в ComponentOne и ComponentTwo и там уже это не проблема.
2. через Redux ( редакс только учу поэтому сам еще не знаю как зделать но зделать вроде можно )
Оба варианта кажутся мне костылями поэтому возможно кто-то подскажет мне какой-то простой вариант который я возможно пропустил по неопытности

Answer 1

[davidnum95]

Надеюсь общий смысл понятен

const headerTitles = {
  '/componentOneURL': 'Component One',
  '/componentTwoURL': 'Component Two'
};

const Header = withRouter(({ location }) => <span>{headerTitles[location.pathname]}</span>);

Comments

[m_frost]

Спасибо за помощь

Answer 2

[hzzzzl]

Redux / React Context
это не костыли, а как раз и сделаны чтобы передавать данные между несвязанными компонентами в react

если чисто на быструю руку, то можно в Header-е такой же Switch / Route поставить и там что-то отображать по разному в зависимости от path, но если потом станет ТЫЩА роутов, то заманаешься в каждом месте приписывать новые строчки

Comments

[m_frost]

Спасибо за помощь

Answer 3

[dev null]

Можно cделать компонент Layout, у него два пропса header и footer, в которые можно какие угодно хедеры или их отсутствие прокидывать. В компонентах типа ComponentOne оборачивать контент Layout'ом. Про паттерн Composition можно почитать в офф доке