我正在开发一个应用程序,在其中我检查用户是否不是loggedIn
。我必须显示登录表单,否则dispatch
和action
将改变路由并加载其他组件。下面是我的代码:
render() {
if (isLoggedIn) {
// dispatch an action to change the route
}
// return login component
<Login />
}
我如何才能做到这一点,因为我不能改变render
函数内部的状态。
9条答案
按热度按时间u5i3ibmn1#
考虑到您使用的是
react-router v4
将组件与
withRouter
一起使用,并使用来自props的history.push
来更改路由。只有当组件不接收Router
props时,才需要使用withRouter
,当您的组件是路由器呈现的组件的嵌套子组件,并且您尚未“t将路由器属性传递给它,或者当组件根本没有链接到路由器,并且呈现为与路由器分离的组件时。重要说明
如果您使用
withRouter
来防止shouldComponentUpdate
封锁更新,则withRouter
必须 Package 实作shouldComponentUpdate
的元件。例如,使用Redux时://这会得到
shouldComponentUpdate
左右的值//这不
或者您可以使用重定向
通过
react-router v2 or react-router v3
,您可以使用context
动态更改路由,如下所示或使用
j2datikz2#
在React路由器版本4中:
tvz2xvvm3#
另一种选择是使用Thunk风格的异步操作(这是安全的/允许有副作用)来处理这个问题。
如果您使用Thunk,则可以使用
thunk.withExtraArgument
将相同的history
对象注入到<Router>
组件和Thunk操作中,如下所示:然后在动作创建器中,您将拥有一个可以安全地与ReactRouter一起使用的
history
示例,因此如果您没有登录,您可以只触发一个常规Redux事件:这样做的另一个好处是URL更容易处理,所以我们可以把重定向信息放在查询字符串上,等等。
您还可以尝试在Render方法中执行此检查,但如果它导致问题,您可能会考虑在
componentDidMount
中或生命周期的其他地方执行此检查(尽管我也理解坚持使用无状态功能能力的愿望!)您仍然可以使用Redux和
mapDispatchToProps
将操作创建器注入到组件中,因此您的组件仍然只是松散地连接到Redux。x759pob24#
这是我的代号
如果用户已登录,则允许PrivateRoute输入
path
,并将令牌保存到localStorge
在此处定义应用程序中的所有路径
e5nszbig5#
那些在react-router v4上实施此功能时遇到问题的人。下面是一个通过react应用程序编程导航的工作解决方案。
history.js
App.js或Route. jsx。将历史记录作为属性传递给路由器。
您可以使用
push()
进行导航。这一切都要归功于这条评论:https://github.com/ReactTraining/react-router/issues/3498#issuecomment-301057248
hpcdzsge6#
2jcobegt7#
我建议您使用connected-react-routerhttps://github.com/supasate/connected-react-router,它可以帮助您执行导航,如果您愿意,甚至可以从reducer/actions执行导航。它有很好的文档记录,易于配置
vdgimpew8#
我能够在无状态功能组件中使用
history
,使用withRouter的方式如下(需要忽略typescript警告):368yc8dk9#
我遇到了这个问题,并且用react-router-dom版本6中的新useNavigate钩子解决了这个问题