title: How can I apply page specific Full screen background image using React?
body: <p>I have a component called <strong>admin-login.jsx</strong> and below is the code for the same:</p>
  
  <pre><code>// AdminLogin Component
  class AdminLogin extends Component {
  
    componentDidMount() {
      let elem = document.querySelector('body');
      addClass(elem, 'admin-login-page');
    }
  
    componentWillUnmount() {
      let elem = document.querySelector('body');
      removeClass(elem, 'admin-login-page');
    }
  
    render() {
  
      return(
        &lt;div className="admin-login"&gt;
          &lt;LoginModule
            submit={handleSubmit(this.onLogin.bind(this))}
            email={email} password={password}
            loginFailed={this.state.loginFailed}
            disableSubmit={this.state.isLoading}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>admin.login.scss</strong></p>
  
  <pre><code>@import "styles/site-mixins";
  
  .admin-login-page {
    background: url(../images/admin.login.bg.jpg) no-repeat top center fixed;
    @include prefix(background-size, cover, webkit moz ms);
  }
  </code></pre>
  
  <p><strong>routes.js</strong></p>
  
  <pre><code>import App from 'components/app';
  import Admin from './admin/admin';
  
  const rootRoute = {
    'path': '/',
    'component': App,
    'childRoutes': [
      Admin
    ]
  };
  
  export default rootRoute;
  </code></pre>
  
  <p><strong>routes/admin/admin.js</strong></p>
  
  <pre><code>export default {
    'path': 'admin-login',
    'indexRoute': {
      getComponent(location, cb) {
        require.ensure([], (require) =&gt; {
          cb(null, require('components/admin/login/admin-login').default);
        }, 'admin_login');
      }
    },
    getComponent(location, cb) {
      require.ensure([], (require) =&gt; {
        cb(null, require('components/admin/admin').default);
      }, 'admin');
    }
  };
  </code></pre>
  
  <p>I have stripped the code that our inessential for this question. What I am trying to do is apply the class <strong>admin-login-page</strong> to the body when this component mounts and then remove the class when the component unmounts.</p>
  
  <p>But, I am seeing a very weird behavior. Even when the class gets removed on unmount and the route changes, the background image stays on the page. </p>
  
  <p>I'll add the image for more clarity.</p>
  
  <p>When I route to localhost:8080/admin-login:
  <a href="https://i.stack.imgur.com/4JXlf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4JXlf.png" alt="When the component mounts, the background image is applied"></a></p>
  
  <p>When I route to the root url i.e <strong>localhost:8080 by clicking the logo on localhost:8080/admin-login using react-routers  tag</strong>:
  <a href="https://i.stack.imgur.com/ZOUUE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZOUUE.png" alt="enter image description here"></a> </p>
  
  <p><strong>Note that,</strong> everything happens without refresh. Also, <strong>I can do this by getting the value of the height of the screen and then applying it as a property to one of the class present in the component so that when component unmounts the background disappears. But, I'd like a solution where I can apply a full screen background image using the body tag.</strong></p>
  
  <p>Thanks in anticipation.</p>