Почему этот скрипт вызывает эту ошибку при попытке связать другую страницу с React router?

Question

У меня есть скрипт прокрутки, работающий на componentDidMount моей Домашней страницы, и когда я пытаюсь связать свою новую страницу с помощью маршрутизатора React, я получаю эту ошибку:

Home.js: 41 Uncaught TypeError: Не удается прочитатьсвойство 'getElementsByTagName' с нулевым значением в eval (Home.js: 41)

Вот код домашней страницы со скриптом componentDidMount и ссылка:

class Home extends Component{
    componentDidMount(){
        window.addEventListener('scroll', () => {
            let parent = document.getElementById('parallax-container');
            let children = parent.getElementsByTagName('div');
            let cover = document.getElementById('cover');
            for(let i = 0; i < children.length; i++){
                children[i].style.transform = 'translateY(' + (window.pageYOffset * i / children.length) + 'px)';
            }
            cover.style.height = (window.pageYOffset)*0.8 + "px";

        }, false)
    }
    render(){

        return(
            <>
            <div className={classes.Hero}>
                <div id="cover" className={classes.BlackCover} ></div>
                <div id='parallax-container'>
                    <Drip color='Black'/>
                    <Drip color='Yellow'/>
                    <Drip color='Pink'/>
                    <Drip color='Blue'/>
                </div>
                <div id="intro" className={classes.Intro}>
                    <div id="avatar" className="ch-item ch-img-1">              
                        <div className="ch-info-wrap">
                            <div className="ch-info">
                                <div className="ch-info-front ch-img-1"></div>
                                <div className="ch-info-back"></div>    
                            </div>
                        </div>
                    </div>
                </div>
                <Link to={'/winner'}><button>Let's Chat!</button></Link>
            </div>
            </>
        );
    }
}            

export default Home; 

А вот этоПереключатель для маршрутизатора:

render(){
      return(
      <main>
          <Switch>
              <Route exact path='/' component={Home}/>
             <Route exact path='/winner' component={Winner}/>
         </Switch>
     </main>
     );
}

И вот страница, на которую я пытаюсь перейти:

import React, { Component } from 'react';

class Winner extends Component{
    render(){
        return(
            <div>Winner!</div>
        );
    }
}
export default Winner; 

Ошибка говорит о том, что он застревает на * let children = parent.getElementsByTagName ( 'DIV');* линия.Я раньше не пользовался маршрутизацией, поэтому думаю, что это просто глупая ошибка, но я не знаю, что делать, чтобы ее исправить.

Answer 1

Причина, по которой он выдает ошибку, заключается в том, что слушатель все еще активен, когда вы переходите на новую страницу.И когда он запущен, больше нет элемента parallax-container, так как он существует только на странице Home.

Попробуйте удалить слушателя в componentWillUnmount.Хороший пример из этого ответа: Удалить прослушиватель событий при размонтировании React

или вот ответ по этой ссылке:

constructor(props){
    super(props);
    this.onScroll = this.onScroll.bind(this);
}

componentDidMount() {
    window.addEventListener('scroll', this.onScroll, false);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.onScroll, false);
}

Еще одно замечание - всегда проверять,элемент существует, поскольку это возможно, поскольку слушатель все еще активен, но элемент не отображается.Простая проверка должна сделать:

if(!parent){return}