用例是我想根据用户是否登录将根(/)映射到两个不同组件之一,并且我希望这两个组件驻留在不同的bundle中并且延迟加载,所以简单地将登录检查放在render()方法中就不行了。
我尝试使用带有require.ensure()的动态路由定义来懒惰加载组件,并且它第一次工作,但在更改登录状态后,组件不会更新(即使我导航到另一条路线然后回到/)。 我尝试通过在包含路由器的组件上设置道具来强制重新渲染路由器,手动和使其成为Redux连接组件,我还尝试向Redux存储添加一个侦听器并更改响应中的组件状态登录更改,但在所有尝试中我收到错误"您无法更改;它将被忽略"并且该组件没有变化。
我丑陋的解决方案是在路由器外部使用不同的组件加载代码,监听登录状态更改并作为响应加载匹配组件并将其设置为包装组件的状态,该状态在render()代码。是否有干净的" React-Router-ish"如何做我想做的事情?
答案 0 :(得分:1)
React Router 4几乎解决了这个问题,因为它使路径配置成为组件渲染的一部分,因此条件渲染是相同的,无论它是基于位置还是基于其他道具/状态。
答案 1 :(得分:0)
最接近干净" React-Router-ish"这样做的方法是使用React Router Enterhooks。
enter钩子是用户定义的函数,当要渲染路径时 。它接收下一个路由器状态作为其第一个参数。替换功能可用于触发向不同URL的转换。
因此,请使用(nextState, replace, callback?)
上的onEnter <Route />
属性。
即将输入路线时调用。它提供下一个路由器状态和重定向到另一个路径的功能。
this
将是触发挂钩的路由实例。如果将回调列为第三个参数,则此挂钩将异步运行,转换将阻塞,直到调用回调。
我遵循的一般最佳做法是将验证流程远离您的路线,并将其置于转换事件/挂钩中。
通常的行为是 - 在路由处理程序实际呈现之前,检查auth,并将用户重定向到另一个路由。在您的情况下,如果您想使用相同的路线,但渲染不同的组件 - 您也应该能够使用相同的技术。然而,这并不常见(基于我所见过的),但它应该是可能的。
有关此方法的完整示例,here's the auth-flow code example you can check。它由React Router的创建者共享,所以它看起来很可信。
PS:我的回答适用于React Router版本&gt; 0.13.x。