getElementById() не работает при входе по react-router

#javascript #reactjs #react-router #create-react-app

Вопрос:

Я создал простое приложение react с помощью react-router (версия 5.) На каждой странице есть нижние колонтитулы с текущим годом.

 const footerYear = document.getElementById('footerThisYear');
if (footerYear) {
  footerYear.innerHTML = new Date().getFullYear();
}

Проблема в том, что приведенный выше фрагмент не работает на дочерних страницах, входящих через react-router <Link> . Это работает при вводе полных URL-адресов.

Предварительный просмотр:https://stackblitz.com/edit/react-mqjws7?file=index.js

Пример URL дочерней страницы:https://react-mqjws7.stackblitz.io/page/a

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

Спасибо!

Ответ №1:

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

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

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

 Router -> Page

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

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