getElementById () не работает при входе <Link>маршрутизатора реагирует

Question

Я создал простое приложение реагирования с реагирующим маршрутизатором (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

Вопрос: Как получить эту работу на каждой странице?

Спасибо!

Answer 1

Если вы хотите, чтобы это работало на каждой странице, вам нужно будет поместить это выражение if в файл Footer.js.Проще всего объяснить это тем, что ваши маршруты работают следующим образом:

URL -> index.js -> Router -> Page

При входе на страницу с использованием прямого URL-адреса это путь, по которому она проходит, поскольку ваш компонент Router находится в index.js.,При щелчке по ссылкам на Home.js, поскольку он исходит из Home.js, который уже находится в index.js, он проходит только через

Router -> Page

. В результате этого нужный нижний колонтитул будетне отображается, потому что функция для его отображения находится в index.js.Чтобы проверить это, вы можете поместить оператор console.log в свой оператор if.Он не будет вызываться, если вы переходите на свои страницы внутри Home.js.

Измените Footer.js на класс и вставьте туда оператор if, и он должен работать правильно.В противном случае вы также можете установить нижний колонтитул для условного рендеринга года с учетом проп.