0

Вообщем я практикуюсь в создании сайта на React js. Я подключил react-router-dom и сделал чтобы можно было переходить по страницам. Но мне нужно чтобы при переходе на определенную страницу header изменялся на другой(у меня есть 2 компонента, первый для всех страниц кроме регистрации, второй для регистрации). Не могу понять как реализовать смену header при переходе на определенную страницу.

1 ответ 1

0

Когда Вы переходите на страницу react-router передает в props переменную match, в которой записан текущий URL и прочая информация о странице. Но для этого в роуте надо передать exact свойство:

<Route path={`/`} component={HomePage} exact></Route>

Далее необходимо передавать в header данную информацию. Если хедер не является дочерним компонентом (что логично если правильно организовали структуру), а глобальный, то можете воспользоваться redux к примеру для синхронизации состояний компонентов не являющиеся между собой дочерними-родительскими.

Алгоритм такой:

При переходе на страницу в конструкторе записываете данную инфу в стейт глобальный через redux Далее считываете её хедером, и вызываете метод сравнения из области: if (path == '/registration') ... меняете стили хедера на такой и т.д. или флаг на тот или иной компонент, всё уже от реализации зависит

1
  • Спасибо, попробую.
    – Antonio
    15 апр 2020 в 2:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.