Разный header с react routing
Вообщем я практикуюсь в создании сайта на React js. Я подключил react-router-dom и сделал чтобы можно было переходить по страницам. Но мне нужно чтобы при переходе на определенную страницу header изменялся на другой(у меня есть 2 компонента, первый для всех страниц кроме регистрации, второй для регистрации). Не могу понять как реализовать смену header при переходе на определенную страницу.
Ответы (1 шт):
Когда Вы переходите на страницу react-router передает в props переменную match, в которой записан текущий URL и прочая информация о странице. Но для этого в роуте надо передать exact свойство:
<Route path={`/`} component={HomePage} exact></Route>
Далее необходимо передавать в header данную информацию. Если хедер не является дочерним компонентом (что логично если правильно организовали структуру), а глобальный, то можете воспользоваться redux к примеру для синхронизации состояний компонентов не являющиеся между собой дочерними-родительскими.
Алгоритм такой:
При переходе на страницу в конструкторе записываете данную инфу в стейт глобальный через redux
Далее считываете её хедером,
и вызываете метод сравнения из области: if (path == '/registration') ... меняете стили хедера на такой и т.д. или флаг на тот или иной компонент, всё уже от реализации зависит