Как лучше передавать данные в hoc?

Question

[Виктор]

Есть такая структура:

Есть компонент высшего порядка, в котором находятся хэдер, футер и контентная часть - роуты. Мне надо чтобы при переходе по определенному роуту менялся цвет хэдера. К примеру при переходе на Main хэдер был белый а буквы черные, а при переходе на Forum наоборот хэде-черный, буквы - белые. Как правильно передать пропс в хэдер в данном случае?

Answer 1

[davidnum95]

Несколько вариантов есть, один из них:

<Route location={{ state: { headerColor: 'blue' } }}   path='/forum' component={Forum} />
 <Route location={{ state: { headerColor: 'red' } }}   path='/survey' component={SurveyPage} />

Дальше в HOC или в хэдере подключаем роутер через withRouter и достаем из location цвет

Comments

[Виктор]

Я уж было обрадовался но в данном случае location.state = undefined

По документации можно делать так.

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

Но есть один существенный недостаток state получить данные только при переходе по ссылке. При первой загрузке никаких данных не будет

[davidnum95]

Виктор Поляков, странно, разобрались в итоге?

[Виктор]

davidnum95, в итоге да, не так как хотелось конечно, но разобрались. Пришлось использовать контекст и при загрузке того или иного компонента из контекста вызывалась функция changeColor, которая меняла состояние с цветом, которое было проброшено в Навбар и меняло цвет.

[davidnum95]

Виктор Поляков, ну да, контекст как вариант, либо если есть какой нибудь стор, то можно через него