当由react-router的<link />输入时，getElementById（）不起作用

Question

我用react-router（v5）创建了一个简单的react应用。每页中都有当前年份的页脚。

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

问题是上面的代码段在通过react-router的<Link>进入的子页面中不起作用。输入完整的网址后即可使用。

预览： https://stackblitz.com/edit/react-mqjws7?file=index.js

子页面示例网址： https://react-mqjws7.stackblitz.io/page/a

问题：如何在每个页面中进行这项工作？

谢谢！

Answer 1

如果要在每个页面上使用它，则必须将该if语句放入Footer.js文件中。解释此问题的最简单方法是您的路线按以下方式运行：

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

使用直接URL进入页面时，这是它通过的路径，因为您的路由器组件位于index.js中。单击Home.js上的链接时，由于它起源于index.js中已有的Home.js，因此只能通过

Router -> Page

因此，由于要显示的功能位于index.js中，因此未显示所需的正确页脚。要对此进行测试，可以在if语句中放置一个console.log语句。如果您要导航到Home.js内部的页面，则不会调用它。

将Footer.js更改为一个类，然后在其中放置if语句，它应该可以正常工作。否则，您也可以将页脚设置为有条件地赋予给定道具的年份。