通过 react-router 的 <Link> 进入时 getElementById() 不起作用

Question

我用 react-router(v5) 创建了一个简单的 react 应用。每个页面都有带有当前年份的页脚。

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

问题是上面的 sn-p 在通过 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 上的链接时，由于它源自 Home.js，而 Home.js 已经在 index.js 中，所以它只是通过

Router -> Page

因此，您想要的正确页脚没有显示，因为显示它的函数位于 index.js 中。要对此进行测试，您可以在 if 语句中放置 console.log 语句。如果您导航到 Home.js 中的页面，则不会调用它。

将 Footer.js 更改为一个类并将 if 语句放在那里，它应该可以正常工作。否则，您还可以将页脚设置为有条件地呈现给定道具的年份。