Materialize and react-router, materialize JS function stops working when changing route

Question

I'm using React, react-router and materialize css. I want to add a simple parallax effect on my homepage and it is working when I fist load the page:

import React from 'react'
import M from 'materialize-css';
import Cinema from '../cinema1.jpg'

const Home = () =>{

    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.parallax');
        M.Parallax.init(elems);
      });

    return(
        <section>
            <div id="index-banner" className="parallax-container">  
                <div className="section no-pad-bot">
                    <div className="container">
                        <h1 className="header center">Material </h1>
                        <div className="row center">
                            <h5 className="header col s12 white-text">A parallax landing example</h5>
                        </div>
                        <div className="row center">
                            <a href="http://materializecss.com/getting-started.html" id="download-button" className="btn-large waves-effect waves-light teal lighten-1">Get Started</a>
                        </div>
                    </div>
                </div>
                <div className="parallax"><img src={ Cinema } alt="Unsplashed background img 1" /></div>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et laoreet felis. Sed rhoncus vestibulum erat ut luctus. Aenean nec sem sagittis, pulvinar elit at, bibendum enim. Vivamus blandit, diam vel venenatis vehicula, dolor neque feugiat erat, id mollis metus mi eu leo. Duis suscipit vestibulum tortor. Quisque eget urna non est tincidunt gravida. Aenean sed ex mi. Fusce aliquet mollis finibus. Nam tristique pulvinar orci, cursus pulvinar lectus blandit id. Cras nulla est, viverra eget ultrices sit amet, vulputate non felis. Mauris condimentum dapibus tempor. Etiam sed leo metus. Mauris convallis nunc eu porttitor interdum. </p>
            </div>
        </section>
    )
}

When I change the route and go back to the homepage the parallax is not initiated again. How come that "M.Parallax.init(elems);" stops working when the route changes? Should I write a function to fire it up everytime I click on the home route? What I'd like to know is why it stops working most of all.

Can you try window.addEventListener("loaded", yourCallback) instead? — Chris Ngo, Jan 06 '19 at 09:57
https://stackoverflow.com/a/53348716/8437974 For modal to work, use `ref`. — Germa Vinsmoke, Jan 06 '19 at 10:58
And I am also facing the react-router issue with css (prism.css) not loading, it loads after a refresh so maybe this will help you in that case https://stackoverflow.com/questions/40426011/react-router-not-loading-css-for-nested-pages-on-refresh — Germa Vinsmoke, Jan 06 '19 at 10:59

score 0 · Answer 1 · answered Jan 06 '19 at 11:37

The solution was to turn this function based component where I wanted to use the parallax effect into a class based component. Then I could use lifecycle hooks to check if the component did mount:

import M from 'materialize-css'


class Home extends Component {
    componentDidMount(){
        var elems = document.querySelectorAll('.parallax');
        M.Parallax.init(elems);
      };
    render(){
        return(
            <section>
                <div id="index-banner" className="parallax-container">  
                    <div className="section no-pad-bot">
                        <div className="container">
                            <h1 className="header center">Material </h1>
                            <div className="row center">
                                <h5 className="header col s12 white-text">A parallax landing example</h5>
                            </div>
                            <div className="row center">
                                <a href="http://materializecss.com/getting-started.html" id="download-button" className="btn-large waves-effect waves-light teal lighten-1">Get Started</a>
                            </div>
                        </div>
                    </div>
                    <div className="parallax"><img src={ Cinema } alt="Unsplashed background img 1" /></div>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et laoreet felis. Sed rhoncus vestibulum erat ut luctus. Aenean nec sem sagittis, pulvinar elit at, bibendum enim. Vivamus blandit, diam vel venenatis vehicula, dolor neque feugiat erat, id mollis metus mi eu leo. Duis suscipit vestibulum tortor. Quisque eget urna non est tincidunt gravida. Aenean sed ex mi. Fusce aliquet mollis finibus. Nam tristique pulvinar orci, cursus pulvinar lectus blandit id. Cras nulla est, viverra eget ultrices sit amet, vulputate non felis. Mauris condimentum dapibus tempor. Etiam sed leo metus. Mauris convallis nunc eu porttitor interdum. </p>
                </div>
            </section>
        )
    }
}

export default Home

Now everytime the component mounts the parallax is working.

jipegue · Answer 2 · 2020-09-07T02:04:30.117

your answer working well. you can also with stateless component and hook useEffect like that :

    import React, { useEffect } from 'react';
    import Voldemort from './../../assets/img/voldemort.jpg'
    import M from 'materialize-css';

    const Paralax = () => {
        useEffect(
         () => {
            var elems = document.querySelectorAll('.parallax');
            M.Parallax.init(elems, { responsiveThreshold: 0 });
         }, []
    );

    return (
        <div>
            <div className="parallax-container">
                <div className="parallax"><img src={Voldemort} alt="voldemort" /></div>
            </div>
        </div>
        );
    };

    export default Paralax;

Materialize and react-router, materialize JS function stops working when changing route

2 Answers2