GetElementById() не работает при входе с помощью <Link> реактивного маршрутизатора
Я создал простое приложение для реагирования с помощью react-router (v5.). На каждой странице есть нижние колонтитулы с текущим годом.
const footerYear = document.getElementById('footerThisYear');
if (footerYear) {
footerYear.innerHTML = new Date().getFullYear();
}
Проблема в том, что приведенный выше фрагмент не работает на дочерних страницах, поступающих через реактивный маршрутизатор <Link>. Это работает при вводе полных URL-адресов.
Предварительный просмотр: https://stackblitz.com/edit/react-mqjws7?file=index.js
Пример URL дочерней страницы: https://react-mqjws7.stackblitz.io/page/a
Вопрос: Как добиться этой работы на каждой странице?
Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если вы хотите, чтобы это работало на каждой странице, вам придется поместить этот оператор if в файл Footer.js. Самый простой способ объяснить это состоит в том, что ваши маршруты работают следующим образом:
URL -> index.js -> Router -> Page
При входе на страницу с использованием прямого URL-адреса это путь, по которому она проходит, поскольку ваш компонент Router находится в index.js. При нажатии на ссылки на Home.js, поскольку они происходят из Home.js, который уже находится в index.js, он только проходит
Router -> Page
В результате нужный вам нижний колонтитул не отображается, потому что функция для его отображения находится в index.js. Чтобы проверить это, вы можете поместить оператор console.info внутрь своего оператора if. Он не будет вызываться, если вы переходите на свои страницы внутри Home.js.
Измените Footer.js на класс и поместите туда оператор if, и он должен работать правильно. В противном случае вы также можете настроить нижний колонтитул для условного отображения года с учетом реквизита.
Спасибо за подсказку более простого решения!
почему у вас это как внешний скрипт, когда вы можете просто поместить его в нижний колонтитул jsx?