React + Laravel: Nivo Slider не работает должным образом с навигацией на основе React Router - PullRequest
Новая
       55

React + Laravel: Nivo Slider не работает должным образом с навигацией на основе React Router

0 голосов
/ 21 декабря 2018

Я создаю приложение, используя React и Laravel.Я застрял с навигационной частью.Я загружаю файл main.js (содержащий код nivo-слайдера) в файл index.blade.php. 

<body class="home home-4">
    <!-- React App Container -->
    <div class="all">
        <div id="app"></div>
    </div>

    <!-- App JS -->
    <script src="{{URL::asset('js/app.js')}}" ></script>

    <!-- Vendor JS -->
    <script src="{{URL::asset('/libs/jquery/jquery.js')}}"></script>
    <script src="{{URL::asset('/libs/bootstrap/js/bootstrap.js')}}"></script>
    <script src="{{URL::asset('/libs/jquery.countdown/jquery.countdown.js')}}"></script>
    <script src="{{URL::asset('/libs/nivo-slider/js/jquery.nivo.slider.js')}}"></script>
    <script src="{{URL::asset('/libs/owl.carousel/owl.carousel.min.js')}}"></script>
    <script src="{{URL::asset('/libs/slider-range/js/tmpl.js')}}"></script>
    <script src="{{URL::asset('/libs/slider-range/js/jquery.dependClass-0.1.js')}}"></script>
    <script src="{{URL::asset('/libs/slider-range/js/draggable-0.1.js')}}"></script>
    <script src="{{URL::asset('/libs/slider-range/js/jquery.slider.js')}}"></script>
    <script src="{{URL::asset('/libs/elevatezoom/jquery.elevatezoom.js')}}"></script>

    <!-- Template JS -->
    <script src="{{URL::asset('js/main.js')}}"></script>

</body>

Ниже приведен мой компонент приложения, содержащий реагирующий маршрутизатор. 

var React = require('react');
var ReactDOM = require('react-dom');

const Router = require('react-router-dom').BrowserRouter;
const Route = require('react-router-dom').Route;
const Switch = require('react-router-dom').Switch;

// var Nav = require('./Nav');
var Home = require('./components/Home');
var About = require('./components/About');
var Contact = require('./components/Contact');

ReactDOM.render(
    <Router>
        <div className="container">         
            <Route path="/" exact component={Home}></Route>
            <Route path="/home" component={Home}></Route>
            <Route path="/about" component={About}></Route>
            <Route path="/contact" component={Contact}></Route>
        </div>
    </Router>, document.getElementById('app'));

Проблема с навигацией по компоненту Home.Когда приложение загружается в первый раз, оно правильно отображает Nivo Slider.Но когда я нажимаю на любую из навигационных ссылок и возвращаюсь обратно в «Домой», Nivo Slider ломается.

Домашний компонент: 

........ // Some code here
class Home extends React.Component {
    render() {
        return(
            <div>
                <Header />
                <div id="content" className="site-content">
                    <div className="section slideshow">
                        <div className="container">
                            <div className="tiva-slideshow-wrapper">
                                <div id="tiva-slideshow" className="nivoSlider">
                                    <Link to="#">
                                        <img className="img-responsive" src="img/slideshow/home4-slideshow-1.jpg" alt="Slideshow Image" />
                                    </Link>
                                    <Link to="#">
                                        <img className="img-responsive" src="img/slideshow/home4-slideshow-2.jpg" alt="Slideshow Image" />
                                    </Link>
                                    <Link to="#">
                                        <img className="img-responsive" src="img/slideshow/home4-slideshow-3.jpg" alt="Slideshow Image" />
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                   ........... // More Code to go

Насколько я понимаю, каким-то образом он не может загрузить main.js из-за неправильной работы ползунка.

Секция ползунка при первой загрузке: 

<div class="section slideshow">
    <div class="container">
        <div class="tiva-slideshow-wrapper">
            <div id="tiva-slideshow" class="nivoSlider">
                <a href="/" class="nivo-imageLink" style="display: block;">
                    <img class="img-responsive" src="img/slideshow/home4-slideshow-1.jpg" alt="Slideshow Image" style="width: 1540px; visibility: hidden;">
                </a>
                <a href="/" class="nivo-imageLink" style="display: none;">
                    <img class="img-responsive" src="img/slideshow/home4-slideshow-2.jpg" alt="Slideshow Image" style="width: 1540px; visibility: hidden;">
                </a>
                <a href="/" class="nivo-imageLink" style="display: none;">
                    <img class="img-responsive" src="img/slideshow/home4-slideshow-3.jpg" alt="Slideshow Image" style="width: 1540px; visibility: hidden;">
                </a>
                <img class="nivo-main-image" src="img/slideshow/home4-slideshow-1.jpg" style="display: inline; width: 1540px; height: 686px;">
                <div class="nivo-caption" style="display: none;"></div>
                <div class="nivo-directionNav">
                    <a class="nivo-prevNav">Prev</a>
                    <a class="nivo-nextNav">Next</a>
                </div>
                <!-- Some of the nivo slider code goes here -->
            <div class="nivo-controlNav">
                <a class="nivo-control active" rel="0">1</a>
                <a class="nivo-control" rel="1">2</a>
                <a class="nivo-control" rel="2">3</a>
            </div>
        </div>
    </div>
</div>

Секция ползунка после навигации: 

<div class="section slideshow">
    <div class="container">
        <div class="tiva-slideshow-wrapper">
            <div id="tiva-slideshow" class="nivoSlider">
                <a href="/">
                    <img class="img-responsive" src="img/slideshow/home4-slideshow-1.jpg" alt="Slideshow Image">
                </a>
                <a href="/">
                    <img class="img-responsive" src="img/slideshow/home4-slideshow-2.jpg" alt="Slideshow Image">
                </a>
                <a href="/">
                    <img class="img-responsive" src="img/slideshow/home4-slideshow-3.jpg" alt="Slideshow Image">
                </a>
            </div>
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 22 декабря 2018

Благодаря этому ответу, который подтвердил, что проблема была в том, что файл js не загружался при перенаправлении на более новые маршруты .

Поэтому я добавил пакет loadjs и вызвал его в componentDidMount () до загрузки библиотек после маршрутизации , что решило проблему.

Мой метод componentDidMount () из Домашнего компонента: 

componentDidMount() {
    loadjs('js/main.js', function() {
        console.log('Everything Working Fine');
    });
}
...