Question

当我使用react路由器渲染某个组件时，我需要重新加载我的页面。我需要这个，因为我需要再次加载JavaScript脚本并检测具有特定id的特定表单标记。如果我不重新加载页面，脚本永远不会检测到表单的ID。（此脚本在表单上进行了一些验证）。

如果我从我的主组件（root）转到联系人组件，则脚本不起作用（我可以发送带有空字段的表单）。但是，如果我从家中转到联系人组件，然后重新加载页面，脚本就会开始工作。

这是我在呈现主页并且脚本未检测到表单ID时出现的错误：

form-submission-handler.js:162 Uncaught TypeError: Cannot read property 'addEventListener' of null at HTMLDocument.loaded (form-submission-handler.js:162)

这就是用于检测id的内容：

function loaded() {
    console.log('contact form submission handler loaded successfully');
   // bind to the submit event of our form
   var form = document.getElementById('gform');
   form.addEventListener("submit", handleFormSubmit, false);
};
document.addEventListener('DOMContentLoaded', loaded, false);

因此，如果我重新加载页面，form-submission-handler脚本可以检测表单。

Here是一个可以复制正在发生的事情的页面。只需转到“Contacto”部分，它就在Navbar中。

表单提交处理程序脚本位于我的index.html文件中的标记之前的脚本标记内，其中呈现了应用程序。

Answer 1

可以通过反应重新加载页面并对路由器做出反应。要重新加载，您只需提供带有联系人的URL的锚点链接，当用户点击该锚点时，将再次从服务器获取具有该URL的页面（您必须确保您的服务器将响应该URL和返回你的反应应用程序）

然而，人们通常会竭尽全力阻止反应应用程序重新加载，因为在重新加载时，您的反应应用程序的所有状态都将丢失。此外，我无法想到我实际上需要重新加载反应应用程序的任何情况，特别是对于像表单验证和提交这样普通的东西。因此，虽然您需要重新加载可能仍然是合理的，但有强烈的迹象表明您正试图以某种相当奇怪的方式使用反应，并且您可以通过更多习惯做出反应及其常用的使用模式来解决您的问题。

是否可以使用react和react路由器重新加载一次页面？

1 个答案: