将静态网站模板转换为反应项目的问题

Question

我是 reactjs 的新手。首先，我将总结一下发生在我身上的事情。当我尝试使用 react-router-dom 中的 useNavigate() 移动到另一个页面时，该页面中没有触发一些点击事件。但是当刷新该页面时，javascript 效果很好。我想使用 metronic 静态网站模板制作 React 网站（看起来像 medium.com）。所以我在 public 文件夹的 index.html 文件中添加了必需的 css 和 js 文件，如下所示。

    ...
    <link href="%PUBLIC_URL%/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
    <link href="%PUBLIC_URL%/assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
    <title>React App</title>
   </head>
   <body>
    <div id="root"></div>
   </body>  
  <script src="%PUBLIC_URL%/assets/plugins/global/plugins.bundle.js"></script>
  <script src="%PUBLIC_URL%/assets/js/scripts.bundle.js"></script>
  <script src="%PUBLIC_URL%/assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
  <script src="%PUBLIC_URL%/assets/js/custom/widgets.js"></script>
  <script src="%PUBLIC_URL%/assets/js/custom/apps/chat/chat.js"></script>
  <script src="%PUBLIC_URL%/assets/js/custom/modals/create-app.js"></script>
  <script src="%PUBLIC_URL%/assets/js/custom/modals/upgrade-plan.js"></script>

然后我制作了一个登录和仪表板页面。成功登录后，页面导航到仪表板页面。（为简单起见，我省略了不必要的代码。）

...
import { useNavigate } from "react-router-dom";
...
const Login =() => {
 const navigate=UseNavigate();
 useEffect(() => {
  dispatch(login(credential))
  .unwrap()
  .then(()=>{
    navigate("/dashboard")});

但在仪表板页面中，来自 Metronic 的原始 javascript 不起作用。如果我刷新页面，那么 javascript 效果很好。（点击按钮时的下拉事件） plugins.bundle.js 和 scripts.bundle.js 负责点击事件处理，它们已经包含在页面中。也许我在反应中使用 Metronic 模板的方法不正确。请解决这个问题。我整天都在尝试，但找不到解决方案。提前致谢。

Answer 1

我终于解决了这个问题。对于那些会遇到这个问题的人，我会解释根本原因和解决方案！所有 Metronic bootstrap 菜单组件都会自动初始化，但有时像我一样应该初始化实例。在我的问题中，我无法触发下拉菜单事件，因为当导航到仪表板 (re-rendering) 时，不会自动初始化。因此，在 useEffect 挂钩中，只需像下面这样初始化 KTMenu。

KTMenu.createInstances();

对于那些类似的情况，请查看本手册metronic documentation如何初始化实例，然后在 useEffect 挂钩中添加初始化代码。

将静态网站模板转换为反应项目的问题

Problem in converting static website template to react project

reactjs

metronic

react-navigation