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

我正在寻求移植我现有的网站，该网站使用主题来利用反应组件。

该主题有很多使 UI 正确渲染的功能（包括几个动画）。

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

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

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

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

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

Since react-router实际上并没有重新加载页面，我没有办法scripts.js知道何时执行其 UI 功能。

这个讨论在这里 https://github.com/ReactTraining/react-router/issues/3256谈论包装scripts.js在一个函数中，并在每次更新发生时调用它Router level.

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

import {createBrowserHistory} from 'history';


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

export {history};

现在我能够知道每次路线更改发生时，我现在需要的就是实际获取scripts.js加载'。

My 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));

我不太熟悉这些库从 webpack 编译到浏览器的方式，如果代码块不充分/不必要，我很抱歉

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