React - 动态粘滞页脚

Question

我想根据身高是否高于窗户高度来使页脚变粘或不粘。
当我改变页面时，我在以前的页面上会出现错误的身高 我有一个路由（/ projects /：文件夹），其中一个param加载了相同的组件，我在这里也有问题因为是同一页面。我该怎么办？

我的路由器：

<Router>
    <AutoScrollToTop>
    <LocationListener {...this.props}/>
    <Header/>
      <Container>
        <Switch>
          <Route exact path="/" component={Projects}/>               
          <Route exact path="/projects/:folder?" component={Projects}/>
          <Route exact path="/projects/:folder/:id" component={Sketch}/>
          <Route exact path="/projects/:folder/:id/details" component={Details}/>
          <Route component={NoMatch}/>
        </Switch>
      </Container>
      <Footer/>
    </AutoScrollToTop>
  </Router>

这里有我的 LocationListener 组件：

static contextTypes = {
    history: PropTypes.object,
};

...

stickyFooter(active) {
    var footer = document.querySelector('.footer');

    if (active) {
        document.body.style.position = 'absolute';
        document.body.style.width = '100%';
        document.body.style.height = '100%';
        footer.classList.add('sticky-footer');
    } else {
        document.body.style.position = 'initial';
        document.body.style.width = 'initial';
        document.body.style.height = 'initial';
        footer.classList.remove('sticky-footer');
    }
}

componentDidMount() {
    this.props.history.listen(() => {
        this.stickyFooter(document.body.clientHeight > window.innerHeight);
    });
}

componentDidUpdate() {
    console.log('body: ' + document.body.clientHeight + ' - window: ' + window.innerHeight);
    this.stickyFooter(document.body.clientHeight > window.innerHeight);
}

componentWillReceiveProps() {
    this.stickyFooter(document.body.clientHeight > window.innerHeight);
}