На главную страницу нужно загрузить javascript файл после reactjs Ссылка - PullRequest
Новая
       9

На главную страницу нужно загрузить javascript файл после reactjs Ссылка

0 голосов
/ 29 апреля 2020

Я столкнулся с проблемой с моим ползунком и Reactjs Link. Давайте начнем отсюда, что, когда я запускаю свою реакцию, она работает идеально после того, как я использую Link до go других страниц ( как О), затем снова используйте домашнюю ссылку, слайдер не будет отображаться. Также, когда я использую кнопку «Назад», это тоже не работает. я заметил, что его, потому что JavaScript файл должен быть загружен снова. Вот мой код:

Navbar. js

import React, { Fragment } from 'react';
import { Link } from 'react-router-dom';
const Navbar = () => {
  return (
    <Fragment>
      <header id='header' className='header header-transparent header-layout1'>
        <nav className='navbar navbar-expand-lg sticky-navbar'>
              <ul className='navbar-nav ml-auto'>
                <li className='nav__item'>
                  <Link to='/' className='nav__item-link active'>
                    Home
                  </Link>
                </li>
                <li className='nav__item'>
                  <Link to='/about' className='nav__item-link'>
                    About
                  </Link>
                </li>
              </ul>
        </nav>
      </header>
    </Fragment>
  );
};

export default Navbar;

Слайдер. js

    import React, { Fragment } from 'react';

    const Slider = () => {
      return (
        <Fragment>
          <section id='slider' className='slider slider-layout1'>
            <div
              className='carousel owl-carousel carousel-arrows'
              data-slide='1'
              data-slide-md='1'
              data-slide-sm='1'
              data-autoplay='true'
              data-nav='true'
              data-dots='false'
              data-space='0'
              data-loop='true'
              data-speed='3000'
              data-transition='fade'
              data-animate-out='fadeOut'
              data-animate-in='fadeIn'
            >
              <div className='slide-item align-v-h text-center bg-overlay'>
                <div className='bg-img'>
                  <img src='assets/images/backgrounds/2.jpg' alt='slide img' />
                </div>            
              </div>
              <div className='slide-item align-v-h text-center bg-overlay bg-overlay-2'>
                <div className='bg-img'>
                  <img src='assets/images/backgrounds/8.jpg' alt='slide img' />
                </div>            
              </div>
            </div>        
            </svg>
          </section>
        </Fragment>
      );
    };

export default Slider;

О. js

import React from 'react';

const About = () => {
  return <div>ABout Page</div>;
};

export default About;

Дом. js 

import React, { Fragment } from 'react';
import Slider from './Slider';
const Home = () => {
  return (
    <Fragment>
      <Slider />
      Home Page
    </Fragment>
  );
};

export default Home;

Вот мой вопрос:

  • Что я могу сделать, чтобы реагировать на загрузку файла JavaScript плагина (ползунок) после ссылки нажали?

  • Это хороший подход для использования ползунка в веб-сайте реакции?

...