Passing data between unrelated components in react??

Question

React

There is part of the page

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

This is a conditional part of the app, we have a Header Footer here and an element that is loaded when switching to the corresponding route.
We need to change the state of the Header depending on which element we switched to in Switch, for myself I deduced 2 possible solutions to the problem:
1. hide the Header in ComponentOne and ComponentTwo and there it is no longer a problem.
2. through Redux (I’m just learning redux, so I don’t know how to do it myself, but it’s possible to do it)
Both options seem like crutches to me, so maybe someone will tell me some simple option that I might have missed due to inexperience

Answer 1

I hope the general meaning is clear

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

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