Question

我是React的新手，正在从事MERN应用程序。

我创建了一个涉及猫头鹰传送带的组件。

我第一次访问该页面时，它运行良好，但是当我导航到另一条路线（我正在使用React Router）并导航到带有轮播的页面时，该页面未加载。我需要刷新整个页面才能重新加载轮播。

我的组件

 const Slider = () => {
  return (
    <div id="slider" className="loading has-parallax">
        <div id="loading-icon"><i className="fa fa-cog fa-spin"></i></div>
        <div className="owl-carousel homepage-slider carousel-full-width">
            <div className="slide">
                <div className="container">
                    <div className="overlay">
                        <div className="info">
                            <div className="tag price">$ 16,000</div>
                            <h3>987 Cantebury Drive</h3>
                            <figure>Chicago, IL 60610</figure>
                        </div>
                        <hr/>
                        <a href="property-detail.html" className="link-arrow">Read More</a>
                    </div>
                </div>
                <img alt="" src="assets/img/slide-02.jpg" />
            </div>
            <div className="slide">
                <div className="container">
                    <div className="overlay">
                        <div className="info">
                            <div className="tag price">$ 28,500</div>
                            <h3>1866 Clement Street</h3>
                            <figure>Atlanta, GA 30303</figure>
                        </div>
                        <hr/>
                        <a href="property-detail.html" className="link-arrow">Read More</a>
                    </div>
                </div>
                <img alt="" src="assets/img/slide-03.jpg" />
            </div>
        </div>
    </div>
  )
}

export default Slider

我认为问题是由导入轮播的方式引起的。我将轮播导入到public / index.html中，就像它是一个常规的html-js应用程序一样，因此当我使用滑块返回路由时，它不会重新加载整个index.html页面，并且自然地也不会加载滑块。 / p>

index.html：

<link rel="stylesheet" href="assets/css/owl.carousel.css" type="text/css">
<link rel="stylesheet" href="assets/css/owl.transitions.css" type="text/css">

.......

<script type="text/javascript" src="assets/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/smoothscroll.js"></script>
<script type="text/javascript" src="assets/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap-select.min.js"></script>

是否有一种导入猫头鹰传送带的方法，所以除了使用react-owl-carousel之外，它还可以正常工作。

谢谢。

访问其他路线后未加载React-Node.js猫头鹰轮播

0 个答案: