Question

我使用react-router-redux进行导航，并嵌套了connect()个ed组件。这似乎工作正常，除了我的嵌套组件在react-router路由改变时不重新呈现。

具体来说，在下面的结构中，App和Sidebar是connect()个组件，它们都需要来自state的信息。当我点击Link中的Sidebar时：

@@router/LOCATION_CHANGE行动正在解雇，
我已将react-router-redux的routerReducer合并到我的州，因此状态正在更新，
应用重新渲染并显示新路线
但是补充工具栏没有重新渲染，所以＆＃34;活跃＆＃34; Link未更新，activeClass永远不会更改。

这里可能出现什么问题？

路由器

<Router component={App}>
   <Route path="foo" component={Foo}/>
   <Route path="bar" component={Bar}/>
   <Route path="baz" component={Baz}/>
</Router>

应用

<div> 
  <Sidebar/>
  <div>
    {children}
  </div>
</div>

边栏

<nav>
   <Link to="/foo" activeClass="active">Foo</Link>
   <Link to="/bar" activeClass="active">Bar</Link>
   <Link to="/baz" activeClass="active">Baz</Link>
</nav>

Answer 1

我有同样的问题（不使用Redux），似乎是React决定不再为你的侧边栏调用渲染，即使App重新渲染。我通过将补充工具栏包裹在withRouter中来修复它，这会导致补充工具栏在路线发生变化时重新渲染。

这样的事情：

import {withRouter} from 'react-router'
// or 'react-router-dom' on v4.x
class Sidebar extends Component {...}
export default withRouter(Sidebar)

Answer 2

这个问题在react-router的指南页面https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md#dealing-with-update-blocking

中有详细记载

TL; DR确保您的组件具有位置感知功能。通过使用sCU或HoC

react-router不会在路由更改时重新呈现redux connect（）ed组件

2 个答案: