用例是我想根据用户是否登录将根（/）映射到两个不同组件之一，并且我希望这两个组件驻留在不同的bundle中并且延迟加载，所以简单地将登录检查render（）方法不会 .
我尝试使用带有require.ensure（）的动态路由定义来懒惰地加载组件，并且它第一次工作，但在更改登录状态后，组件不会更新（即使我导航到另一个路由并返回至 / ） . 我尝试通过在包含路由器的组件上设置道具来强制重新渲染路由器，手动和使其成为Redux连接组件，我还尝试将一个侦听器添加到Redux存储并更改响应的组件状态登录更改，但在所有尝试中我收到错误“您无法更改;它将被忽略”并且组件不会更改 .
我丑陋的解决方案是在路由器外部使用不同的组件加载代码，监听登录状态更改并作为响应加载匹配组件并将其设置为包装组件的状态，该状态在render（）代码中引用 . 是否有一个干净的“React-Router-ish”方式来做我想要的？
2 回答
React Router 4几乎解决了这个问题，因为它使路径配置成为组件渲染的一部分，因此条件渲染是相同的，无论它是基于位置还是基于其他道具/状态 .
干净的"React-Router-ish"方式最接近的方法是使用React Router Enterhooks .
enter钩子是用户定义的函数 called when a route is about to be rendered . 它接收下一个路由器状态作为其第一个参数 . 替换功能可用于触发到不同URL的转换 .
因此，请在
<Route />上使用onEnter(nextState, replace, callback?)属性 .我遵循的一般最佳实践是 place the auth-check flow away from your routes, and place it inside the transition events/hooks .
通常的行为是 - 在路由处理程序实际呈现之前，检查auth，并将用户重定向到另一个路由 . 在您的情况下，如果您想使用相同的路线，但渲染不同的组件 - 您也应该能够使用相同的技术 . 然而，这不是常见的事情（基于我所见过的），但它应该是可能的 .
有关此方法的完整示例，here's the auth-flow code example you can check . 它由React Router的创建者共享，因此它看起来可信 .
PS：我的答案对React Router版本> 0.13.x有效 .