在反应路由器重定向上运行jquery脚本

我希望移植我使用主题的现有网站来利用反应组件。

主题有很多function，可以正确渲染UI（包括几个动画）。

主题的js导入了很多其他的js库。

这意味着我无法编写主题提供的任何UI元素的反应版本。

但是，实际的元素可以用作“哑组件”，我不需要任何数据绑定function。

我可以在我的public/html文件夹中导入我的js库的依赖项，这不是一个大问题。

真正的问题是我的主题库（我将称之为scripts.js）每次使用react-router进行重定向时都不会加载。

由于react-router实际上没有重新加载页面，因此我的scripts.js无法知道何时执行其UIfunction。

这里的讨论讨论了将scripts.js包装在一个函数中，并在每次在Router级别进行更新时调用它。

由于react-router 4没有onUpdate ，我决定订阅历史记录。 我这样做是这样的：

 import {createBrowserHistory} from 'history'; const history = createBrowserHistory(); history.listen(() => { console.log("url has changed"); }); export {history}; 

现在我能够知道每次路由更改发生时，我现在需要的是实际上让scripts.js “加载”。

我的scripts.js很长，其中一些是专有的，所以我只在这里发布它的片段。

 mr = (function (mr, $, window, document){ "use strict"; mr = mr || {}; var components = {documentReady: [],documentReadyDeferred: [], windowLoad: [], windowLoadDeferred: []}; mr.status = {documentReadyRan: false, windowLoadPending: false}; $(document).ready(documentReady); $(window).on("load", windowLoad); function documentReady(context){ context = typeof context === typeof undefined ? $ : context; components.documentReady.concat(components.documentReadyDeferred).forEach(function(component){ component(context); }); mr.status.documentReadyRan = true; if(mr.status.windowLoadPending){ windowLoad(mr.setContext()); } } function windowLoad(context){ if(mr.status.documentReadyRan){ mr.status.windowLoadPending = false; context = typeof context === "object" ? $ : context; components.windowLoad.concat(components.windowLoadDeferred).forEach(function(component){ component(context); }); }else{ mr.status.windowLoadPending = true; } } mr.setContext = function (contextSelector){ var context = $; if(typeof contextSelector !== typeof undefined){ return function(selector){ return $(contextSelector).find(selector); }; } return context; }; mr.components = components; mr.documentReady = documentReady; mr.windowLoad = windowLoad; return mr; }(window.mr, jQuery, window, document)); 

另一点：

 //////////////// Scroll Functions mr = (function (mr, $, window, document){ "use strict"; mr.scroll = {}; var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; mr.scroll.listeners = []; mr.scroll.busy = false; mr.scroll.y = 0; mr.scroll.x = 0; var documentReady = function($){ //////////////// Capture Scroll Event and fire scroll function jQuery(window).off('scroll.mr'); jQuery(window).on('scroll.mr', function(evt) { if(mr.scroll.busy === false){ mr.scroll.busy = true; raf(function(evt){ mr.scroll.update(evt); }); } if(evt.stopPropagation){ evt.stopPropagation(); } }); }; mr.scroll.update = function(event){ // Loop through all mr scroll listeners var parallax = typeof window.mr_parallax !== typeof undefined ? true : false; mr.scroll.y = (parallax ? mr_parallax.mr_getScrollPosition() : window.pageYOffset); mr.scroll.busy = false; if(parallax){ mr_parallax.mr_parallaxBackground(); } if(mr.scroll.listeners.length > 0){ for (var i = 0, l = mr.scroll.listeners.length; i < l; i++) { mr.scroll.listeners[i](event); } } }; mr.scroll.documentReady = documentReady; mr.components.documentReady.push(documentReady); return mr; }(mr, jQuery, window, document)); 

我不太熟悉这些库从Web包编译到浏览器的方式，所以很抱歉，如果代码块不够/不必要

我的问题是，如何在每次react-router页面更改时确保我的脚本都被加载。