ReactJS点击NavLink后刷新页面：外部JS插件加载问题求助

以下是几种可行的解决方案，你可以根据实际场景选择：

方案一：用普通<a>标签替代NavLink #

直接替换Sidebar组件中的NavLink为普通a标签，点击时会触发整页刷新，确保外部JS插件重新加载：

// Sidebar组件内的示例代码
<a href="/home" className={window.location.pathname === "/home" ? "active" : ""}>首页</a>
<a href="/page/teste" className={window.location.pathname === "/page/teste" ? "active" : ""}>测试页</a>

提示：如果需要保留当前路由的高亮样式，可通过window.location.pathname判断并添加对应的active类名。

方案二：在组件挂载时手动初始化插件（推荐） #

无需整页刷新，利用React的生命周期钩子，在组件每次挂载时重新初始化外部插件。以Home组件为例：

// Home.jsx
import React, { useEffect } from 'react';

export default function Home() {
  useEffect(() => {
    // 初始化外部插件的逻辑，示例如下：
    // 1. 如果插件已全局加载，直接调用初始化方法
    if (window.yourExternalPlugin) {
      window.yourExternalPlugin.init();
    }

    // 2. 如果插件需要动态加载脚本，可通过创建script标签实现
    const pluginScript = document.createElement('script');
    pluginScript.src = '/path/to/your/plugin.js';
    pluginScript.onload = () => {
      window.yourExternalPlugin.init();
    };
    document.body.appendChild(pluginScript);

    // 组件卸载时清理插件实例（如果插件支持）
    return () => {
      if (window.yourExternalPlugin) {
        window.yourExternalPlugin.destroy();
      }
      document.body.removeChild(pluginScript);
    };
  }, []); // 空依赖数组确保仅在组件挂载时执行一次

  return <div className="home-container">{/* 页面内容 */}</div>;
}

原理：React路由切换时，目标组件会重新挂载，useEffect钩子会触发，此时执行插件初始化逻辑，解决仅路由切换不加载插件的问题。

方案三：强制NavLink点击时整页刷新 #

如果坚持使用NavLink，可通过自定义点击事件覆盖默认的单页跳转行为：

// Sidebar组件内的示例代码
import { NavLink } from 'react-router-dom';

function Sidebar() {
  const handleRefreshNavigate = (e, targetPath) => {
    e.preventDefault(); // 阻止NavLink的默认单页跳转
    window.location.href = targetPath; // 触发整页刷新
  };

  return (
    <div className="sidebar">
      <NavLink 
        to="/home" 
        onClick={(e) => handleRefreshNavigate(e, '/home')}
      >首页</NavLink>
      <NavLink 
        to="/page/teste" 
        onClick={(e) => handleRefreshNavigate(e, '/page/teste')}
      >测试页</NavLink>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Harrison Martes