react-portal loads data then doesn't re-render

Question

I have been trying to render ParticleJS as a background to the root div of my create-react-app and I have had success of it loading initially, but when changing routes and then visiting the homepage again, the particlejs is gone. Below is my configuration, please let me know if there is something I am missing.

import React, { Component } from 'react';
import { Portal } from 'react-portal';
import Particles from 'react-particles-js';

class Particle extends Component {
  render() {
    return (
      <Portal node={document && document.getElementById('root')}>
        <div id="particles">
          <Particles
            params={{
                    particles: {
                      number: {
                        value: 20,
                        density: {
                          enable: true,
                          value_area: 800
                        }
                      },
                      color: {
                        value: "#ffffff"
                      },
                      shape: {
                        type: "circle",
                        stroke: {
                          width: 0,
                          color: "#000000"
                          },
                      },
                      "polygon": {
                        "nb_sides": 5
                      },
                      "image": {
                        "src": "",
                        "width": 100,
                        "height": 100
                      },
                      "opacity": {
                        "value": 0.6,
                        "random": false,
                        "anim": {
                          "enable": false,
                          "speed": 1,
                          "opacity_min": 0.5,
                          "sync": false
                        }
                      },
                      "size": {
                        "value": 3,
                        "random": true,
                        "anim": {
                          "enable": false,
                          "speed": 40,
                          "size_min": 0.1,
                          "sync": false
                        }
                      },
                      "line_linked": {
                        "enable": true,
                        "distance": 150,
                        "color": "#FFFFFF",
                        "opacity": 0.6,
                        "width": 1
                      },
                      "move": {
                        "enable": true,
                        "speed": 4,
                        "direction": "none",
                        "random": false,
                        "straight": false,
                        "out_mode": "out",
                        "bounce": false,
                        "attract": {
                          "enable": false,
                          "rotateX": 600,
                          "rotateY": 1200
                        }
                      },
                      "interactivity": {
                      "detect_on": "canvas",
                      "events": {
                        "onhover": {
                          "enable": true,
                          "mode": "repulse"
                        },
                        "onclick": {
                          "enable": true,
                          "mode": "push"
                        },
                        "resize": true
                      },
                      "modes": {
                        "grab": {
                          "distance": 400,
                          "line_linked": {
                            "opacity": .6
                          }
                        },
                        "bubble": {
                          "distance": 400,
                          "size": 40,
                          "duration": 2,
                          "opacity": 8,
                          "speed": 3
                        },
                        "repulse": {
                          "distance": 200,
                          "duration": 0.4
                        },
                        "push": {
                          "particles_nb": 4
                        },
                        "remove": {
                          "particles_nb": 2
                        }
                      }
                    },
                    "retina_detect": true
                  }
            }} />
          </div>
        </Portal>
      );
    }
  }

export default Particle;

And I have this for the following component to render this file

class HomePage extends Component {
  componentWillMount() {
    window.scrollTo(0,0);
  }
  render() {
    return (
      <ScrollAnimation animateIn='fadeIn'>
        <Particles/>
      </ScrollAnimation>

Is there something I should be doing to re-render this?

Answer 1

啊....那是CSS，没有意识到粒子背景受到了影响。