React router onEnter 选项 vs 组件生命周期检查授权用户的方法

Posted 2023-02-21

【中文标题】React router onEnter 选项 vs 组件生命周期检查授权用户的方法

【英文标题】：React router onEnter option vs Component life cycle Method to check for authorized users

【发布时间】：2017-01-18 22:38:28

【问题描述】：

哪个更好？

我尝试了onEnter，但这会导致路径之间的闪烁。 onEnter 检查在组件加载之前运行。它在用户通过身份验证后路由然后重新路由，这在视觉上令人不快。现在我只是使用Main 组件的componentWillMount 生命周期来运行授权代码，如果解决则重新路由，否则留在那里。如果我只使用生命周期方法来检查，那么我不能使用来自 react-router 的 Link 组件。关于如何解决闪烁或提高客户端安全性而没有蹩脚的用户界面的任何想法。

【问题讨论】：

你能发布一个代码示例吗？

在我的情况下，如果我使用 onEnter，则不会调用任何生命周期方法。

【参考方案1】：

首先，您应该在 componentDidMount 而不是在 componentWillMount 中执行此操作，因为如果该过程需要一些时间，它会冻结整个应用程序。

至于你的问题，可以在 tje componentDidMount 中检查，然后使用 react router 的 browserHistory 手动推送 url。

查看 react router 的历史文档： https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md

【讨论】：

如果我错了，请纠正我，但我似乎应该对 标签使用 react-router on-Enter，因为这不会重新渲染主要组件。

只是将 url 推送到 browserHistory，它是一样的，但是你不能在生命周期事件上使用链接，因为它是一个组件，所以只需手动执行