是否有一种干净的方法来有条件地加载和呈现相同的React Router路由的不同组件？

Question

用例是我想根据用户是否登录将根(/)映射到两个不同组件之一,并且我希望这两个组件驻留在不同的包中并且延迟加载,所以简单地将登录检查render()方法不会.

我尝试使用带有require.ensure()的动态路由定义来懒惰地加载组件,并且它第一次工作,但在更改登录状态后,组件不会更新(即使我导航到另一个路由并返回至/).我尝试通过在包含路由器的组件上设置道具来强制重新渲染路由器,手动和使其成为Redux连接组件,我还尝试向Redux存储添加一个侦听器并更改响应中的组件状态登录更改,但在所有尝试中我收到错误"您无法更改;它将被忽略"并且组件不会更改.

我丑陋的解决方案是在路由器外部使用不同的组件加载代码,监听登录状态更改并作为响应加载匹配组件并将其设置为包装组件的状态,该状态在render()代码中引用.是否有一个干净的"React-Router-ish"方式来做我想要的？

Answer 1

React Router 4 几乎解决了这个问题，因为它将路由配置作为组件渲染的一部分，因此无论是基于位置还是基于其他 props/state，条件渲染都是相同的。