How can I apply page specific Full screen background image using React?

I have a component called admin-login.jsx and below is the code for the same:

// 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(
      <div className="admin-login">
        <LoginModule
          submit={handleSubmit(this.onLogin.bind(this))}
          email={email} password={password}
          loginFailed={this.state.loginFailed}
          disableSubmit={this.state.isLoading}
        />
      </div>
    );
  }
}

admin.login.scss

@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);
}

routes.js

import App from 'components/app';
import Admin from './admin/admin';

const rootRoute = {
  'path': '/',
  'component': App,
  'childRoutes': [
    Admin
  ]
};

export default rootRoute;

routes/admin/admin.js

export default {
  'path': 'admin-login',
  'indexRoute': {
    getComponent(location, cb) {
      require.ensure([], (require) => {
        cb(null, require('components/admin/login/admin-login').default);
      }, 'admin_login');
    }
  },
  getComponent(location, cb) {
    require.ensure([], (require) => {
      cb(null, require('components/admin/admin').default);
    }, 'admin');
  }
};

I have stripped the code that our inessential for this question. What I am trying to do is apply the class admin-login-page to the body when this component mounts and then remove the class when the component unmounts.

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.

I'll add the image for more clarity.

When I route to localhost:8080/admin-login:

When I route to the root url i.e localhost:8080 by clicking the logo on localhost:8080/admin-login using react-routers tag:

Note that, everything happens without refresh. Also, 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.

Thanks in anticipation.