在React Router重定向上运行jQuery脚本

Question

我希望移植我现有的网站，该网站使用主题来利用React组件。

主题具有许多功能，可以使UI正确呈现（包括多个动画）。

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

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

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

我可以将我的js库的依赖项导入我的public/html文件夹中，所以这不是什么大问题。

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

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

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

由于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 Pack编译到浏览器的方式不太熟悉，如果代码块不足/不必要，请对不起

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