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

Question

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

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

Это условная часть apk здесь Header Нижний колонтитул и элемент, который загружается при переключении на соответствующий маршрут. Необходимо изменить состояние.заголовка, в зависимости от того, на какой элемент мы переключились в Switch, для себя я нашел 2 возможных решения проблемы:

1. скрыть заголовок в ComponentOne и ComponentTwo, и это больше не является проблемой.
2. через Redux (я учу только редуксу, поэтому сам не знаю, как его создать, но можно создать)

Оба варианта кажутся мне костылями, так что, возможно, кто-тоскажите мне какой-нибудь простой вариант, который я мог упустить из-за неопытности

Answer 1

Есть 2 варианта, которые вы можете использовать в зависимости от вашей проблемы.

1. Если вы хотите просто изменить имя активного класса ссылки в вашем заголовке, вы можете использовать NavLink activeClassName:

<NavLink to={"/componentOneURL"} activeClassName="active" className="link">componentOne</NavLink>

Если вам нужен более общий случай, вы делите состояние между двумя дочерними компонентами.Вы можете передавать функции через родительский элемент:

setHeaderState=(value)=>{ this.setState({headerState:value}); }

<Header headerState={this.state.headerState}/> <Switch> <Route path={'/componentOneURL'} render={() => <ComponentOne setHeaderState={this.setHeaderState}/>} /> <Route path={'/componentTwoURL'} render={() => <ComponentTwo setHeaderState={this.setHeaderState}/>} /> </Switch> <Footer/>