ReactDOM.render没有重新渲染列表中的第2个元素。

Question

遇到ReactJS的问题，我

关于 index.js 我有。

ReactDOM.render([<App />, <Footer />], document.getElementById('root'));

问题是 Footer 需要从底部增加80px的padding，只在某些页面上。render 我的方法

<div>
    {isMobile && window.location.pathname.startsWith('/summary') &&
                <div style={{height: 80}}></div> } 
</div>

但当window.location.pathname改变时，它不会重新渲染，我在网络应用中移动，它不会改变，只有当我按下F5时，它才会在该页面上正确渲染。

我试着使用事件在 window 但它们也没有被调用......我怎样才能让它重新渲染？

window.addEventListener('locationchange', function(){
        console.log('xxxxxxx location changed!');
    })

   window.addEventListener('hashchange', function(e){console.log('xxxxxx hash changed')});
   window.addEventListener('popstate', function(e){console.log('xxxxxxx url changed')});

我怎么才能让它重新渲染呢？Footer 工作作为React组件，可以渲染？

Answer 1

这是一个常见的问题!

开箱即用，React被配置为在单页上运行（参见 单页应用)，这基本上意味着它删除屏幕上显示的内容，并在需要更新时渲染新信息。

当然，模拟非单页App的路由行为是比较困难的--请查阅 React Router这是一个为解决这个问题而创建的库。