Невозможно отобразить ползунок jquery в реакции js

Question

Я новичок в reactjs .. Я работаю над проектом электронной коммерции. На целевой странице у меня есть ползунок jquery, который отлично работает при начальной загрузке страницы, но когда я перенаправляю обратно на домашнюю страницу с любой другой страницы, он не загружает ползунок

Я поместил все справочные файлы jquery в индекс. html file

ниже мой код

export default function Home() {
return (
    <Fragment>
   <section className="banner-area">
        <div className="container">
            <div className="row fullscreen align-items-center justify-content-start">
                <div className="col-lg-12">
                    <div className="active-banner-slider owl-carousel">

                        <div className="row single-slide align-items-center d-flex">
                            <div className="col-lg-5 col-md-6">
                                <div className="banner-content">
                                    <h1>Nike New <br/>Collection!</h1>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                                        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
                                    <div className="add-bag d-flex align-items-center">
                                        <a className="add-btn" href=""><span className="lnr lnr-cross"></span></a>
                                        <span className="add-text text-uppercase">Add to Bag</span>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-7">
                                <div className="banner-img">
                                    <img className="img-fluid" src="assets/img/banner/banner-img.png" alt=""/>
                                </div>
                            </div>
                        </div>

                        <div className="row single-slide">
                            <div className="col-lg-5">
                                <div className="banner-content">
                                    <h1>Nike New <br/>Collection!</h1>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                                        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
                                    <div className="add-bag d-flex align-items-center">
                                        <a className="add-btn" href=""><span className="lnr lnr-cross"></span></a>
                                        <span className="add-text text-uppercase">Add to Bag</span>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-7">
                                <div className="banner-img">
                                    <img className="img-fluid" src="assets/img/banner/banner-img.png" alt=""/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</Fragment>
)}

Ниже мой index. html

<script type="text/JavaScript" src="assets/js/vendor/jquery-2.2.4.min.js" ></script>
    <script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type = "text/babel" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
     crossorigin="anonymous"></script>
    <script type="text/JavaScript" src="assets/js/vendor/bootstrap.min.js" ></script>
    <script type="text/JavaScript" src="assets/js/jquery.ajaxchimp.min.js" ></script>
    <script type="text/JavaScript" src="assets/js/jquery.nice-select.min.js" ></script>
    <script type="text/JavaScript" src="assets/js/jquery.sticky.js" ></script>
    <script type="text/JavaScript" src="assets/js/nouislider.min.js" ></script>
    <!-- <script src="assets/js/countdown.js" ></script> -->
    <script type="text/JavaScript" src="assets/js/jquery.magnific-popup.min.js" ></script>
    <script type="text/JavaScript" src="assets/js/owl.carousel.min.js" ></script>

    <script type="text/JavaScript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" ></script>
    <script type="text/JavaScript" src="assets/js/gmaps.min.js" ></script>
    <script type="text/JavaScript" src="assets/js/main.js" ></script>
    <div id="root"></div>

Я использую React-Router-Dom для навигации

        function App() {
          return (

            <BrowserRouter>
            <CartProvider>
            <div className="App">


             <Header/>
             <Content />
             <Footer/>

            </div>
            </CartProvider>
            </BrowserRouter>

          );
        }

    export default App;

под компонентом контента у меня есть все другие компоненты

<Switch>
        <Route exact path="/" component={Home}/>
        <Route exact path="/Product" component={ProductList} />
        <Route exact path="/ProductDetails" component={ProductDetails} />
        <Route excat path="/Contact" component={Contact} />
        <Route excat path="/Login" component={Login} />
        <Route excat path="/OrderConfirm" component={OrderConfirm} />
        <Route excat path="/Checkout" component={Checkout} />
        <Route excat path="/productByCategory/:id" component={productByCategory}/>
        <Route excat path="/Cart" component={Cart} />
        <Route path="*" component={Error404} />
        </Switch>