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

Я создаю приложение на 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'));

Проблема связана с навигацией в компоненте "Дом". Когда приложение загружается в первый раз, оно правильно отображает 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>

reactjs laravel react-router react-router-v4 react-router-dom

21.12.2018 19:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

296

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Добавьте пакет loadjs и вызовите его в componentDidMount (), чтобы загрузить библиотеки после маршрутизации. Ознакомьтесь с приведенным ниже фрагментом для справки.

componentDidMount() {
    loadjs('js/main.js', function() {
        console.info('Test');
    });
}

15.06.2020 16:31

Другие вопросы по теме

Laravel 5.7 правильный способ получения результатов по отношению многие ко многим

Отправка отправки формы Laravel по неправильному маршруту?

Проблема с Spatie / Laravel cors в продакшене

Laravel 5.7 перенаправляет на ту же страницу с идентификатором раздела

Выберите в Vue.js вариант, не отображающий

Трудности с областью видимости в Laravel

Проблема итерации по многомерному массиву в PHP Laravel из ответа API

Определить приложение vue в блейд-компоненте

Laravel не может подключиться к базе данных с помощью Docker Compose

Стратегии сокращения времени тестов при тестировании всех возможностей моего алгоритма

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

Ответы 1

Другие вопросы по теме

Похожие вопросы