我已经学会了两种方法在使用Redux Thunk执行一个JavaScript操作后重定向到不同的页面:
1-方法:将“history”对象作为参数传递给BRAC操作。
在你的组件中,你用“useHistory”钩子定义了“history”对象,并把它传递给你的javascript操作:
function Register(){
const history = useHistory()
const dispatch = useDispatch()
function registerHandler(){
dispatch(registerAsync(registerForm, history))\
}
return (
// JSX Code
<button onClick={registerHandler}>Register</button>
)
}
然后,在你的push操作中,你可以使用“history.push()”来重定向:
export function registerAsync(data, history){
return async function (dispatch) {
try {
const response = await Axios.Post('api/register/', data)
history.push('/register_success')
} catch (e) {
dispatch(registerError(e))
}
}
}
2-方法:使用< Redirect >根据Redux存储值有条件渲染的组件:
在组件中,如果存储值为true,则有条件地返回:
function Register(){
const dispatch = useDispatch()
const registerSuccess = useSelector((store) => store.auth.registerSuccess)
function registerHandler(){
dispatch(registerAsync(registerForm, history))\
}
if (registerSuccess) {
return <Redirect push to="/register_success"/>
}
return (
// JSX Code
<button onClick={registerHandler}>Register</button>
)
}
在我们的Async动作中,我们调度了一个将“registerSuccess”设置为true的动作:
export function registerAsync(data){
return async function (dispatch) {
try {
const response = await Axios.Post('api/register/', data)
dispatch(registerSuccess())
} catch (e) {
dispatch(registerError(e))
}
}
}
减速器:
case actionTypes.REGISTER_SUCCESS:
newState.registerSuccess = true
return newState
有谁知道这两种方法中哪一种是正确的,为什么?
多谢了!
1条答案
按热度按时间7dl7o3gd1#
如果您使用的是react-router-dom v6,那么您应该使用useNavigate而不是useHistory,如本例所示
https://stackoverflow.com/a/63921034/13218213
虽然我通过将
navigate
函数传递给处理程序(在我的示例中,我将其传递给了navigate
函数)找到了一个很好的解决方案,然后,在“Thunk”(或“Thunk”)中,我这样做了