I am creating an app using React and Laravel. I am stuck with the navigation part. I am loading the main.js file (containing the nivo-slider code) in index.blade.php file.
<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>
Following is my App Component containing react-router.
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'));
Problem is with the navigation on Home component. When the app is loaded for the first time, it renders Nivo Slider properly. But when I click on any of the navigation link and navigate back to Home, Nivo Slider breaks.
Home Component:
........ // 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
As per my understanding, somehow it is not able to load main.js due to which the slider is misbehaving.
Slider section at first load:
<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>
Slider section after navigating:
<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>