React Router 4路由导航后如何重新加载外部JavaScript文件？

这个问题我之前做项目时也碰到过，核心原因是React Router属于单页路由——导航切换时不会重新加载整个HTML页面，你放在index.html里的autocomplete.js只会在首次页面加载时执行一次，后续路由跳转自然不会再触发脚本的加载和执行。下面给你几个实用的解决思路：

方案1：把自动完成逻辑封装成React组件/Hook（推荐） #

这是最符合React单页应用模式的做法，把原有脚本里的逻辑迁移到React组件中，让组件挂载时自动执行初始化：

// 新建Autocomplete.js组件
import { useEffect } from 'react';

const Autocomplete = () => {
  useEffect(() => {
    // 把autocomplete.js里的核心逻辑移到这里
    const initAutocomplete = () => {
      const input = document.getElementById('autocomplete-input');
      // 这里写你的自动完成逻辑：比如监听输入事件、请求联想数据、渲染下拉列表等
      input?.addEventListener('input', (e) => {
        // 处理输入逻辑
        console.log('用户输入:', e.target.value);
      });
    };

    initAutocomplete();

    // 组件卸载时清理事件监听，避免内存泄漏
    return () => {
      const input = document.getElementById('autocomplete-input');
      input?.removeEventListener('input', /* 对应的处理函数 */);
    };
  }, []); // 空依赖数组，确保只在组件挂载时执行一次

  return null; // 该组件无需渲染DOM元素
};

export default Autocomplete;

然后在需要用到自动完成的页面组件里引入并渲染它：

import Autocomplete from './Autocomplete';

const SearchPage = () => {
  return (
    <div className="search-page">
      <h1>搜索页面</h1>
      <input id="autocomplete-input" placeholder="输入关键词..." />
      {/* 挂载自动完成逻辑组件 */}
      <Autocomplete />
    </div>
  );
};

这样每次路由切换到SearchPage，组件挂载时就会自动执行自动完成的初始化逻辑，完美适配单页路由的特性。

方案2：路由切换时动态加载并执行脚本 #

如果不想重构原有autocomplete.js的代码，可以通过监听路由变化，手动创建脚本标签加载并执行：

import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

const App = () => {
  const location = useLocation();
  // 用ref缓存已加载的脚本，避免重复加载
  const loadedScripts = useRef({});

  useEffect(() => {
    const loadExternalScript = (src) => {
      // 如果脚本已经加载过，直接返回
      if (loadedScripts.current[src]) return;

      const script = document.createElement('script');
      script.src = src;
      script.async = true;

      // 脚本加载完成后的回调（如果需要手动触发初始化可以在这里调用）
      script.onload = () => {
        loadedScripts.current[src] = true;
        // 假设autocomplete.js里暴露了全局初始化函数
        window.initAutocomplete?.();
      };

      document.body.appendChild(script);

      // 组件卸载时移除脚本
      return () => {
        document.body.removeChild(script);
        delete loadedScripts.current[src];
      };
    };

    // 路由路径变化时，加载autocomplete.js
    const cleanup = loadExternalScript('./assets/js/autocomplete.js');
    return cleanup;
  }, [location.pathname]); // 监听路由路径变化

  return <div id="app"></div>;
};

这个方案适合快速兼容原有代码，但要注意处理全局函数的调用和重复加载的问题。

方案3：在目标组件中手动触发脚本初始化 #

如果autocomplete.js的逻辑是封装成可调用的全局函数（比如window.initAutocomplete），可以在需要的页面组件挂载后手动调用：

import { useEffect } from 'react';

const ProductPage = () => {
  useEffect(() => {
    // 确保DOM元素已经渲染完成
    const autocompleteInput = document.getElementById('product-autocomplete');
    if (autocompleteInput && window.initAutocomplete) {
      // 传入目标DOM元素执行初始化
      window.initAutocomplete(autocompleteInput);
    }
  }, []);

  return (
    <div>
      <input id="product-autocomplete" placeholder="搜索产品..." />
    </div>
  );
};

这个方案的前提是原有脚本的逻辑是可复用的函数，而不是页面加载时直接执行的一次性代码。

内容的提问来源于stack exchange，提问作者dan tenovski