我正在使用react-router-dom和redux。我在调度后使用history.push(“/”),但它显示错误。 我希望用户在成功身份验证后导航到“/”(使用 GOOGLE)
export const googleLogin = () => async (dispatch) => {
try {
const response = await auth.signInWithPopup(provider);
const doc = await db.collection("users").doc(response.user.uid).get();
if (doc.exists) {
await db
.collection("users")
.doc(response.user.uid)
.set(
{
accountDetail: {
emailVerified: response.user.emailVerified,
photoURL: response.user.photoURL,
},
},
{ merge: true }
);
history.push("/")
} else {
await db
.collection("users")
.doc(response.user.uid)
.set({
accountDetail: {
userId: response.user.uid,
displayName: response.user.displayName,
email: response.user.email,
photoURL: auth.currentUser.photoURL,
accountCreatedAt: Date.now(),
},
});
history.push("/")
}
} catch (error) {
await dispatch({ type: AUTH_ERROR, payload: error.message });
}
};
最佳答案
您不能在 Action 创建器文件中使用 useHistory
钩子(Hook),因为它既不是 React 函数组件也不是自定义钩子(Hook)。
根据 rules of hooks ,一个 React Hook,例如useHistory
,只能在函数组件或自定义钩子(Hook)中使用。
但是,如果您想访问 React 组件外部的 history
对象,您可以创建自己的 history
对象并将其提供给 Router
(来自react-router-dom)如下所示:
创建一个文件,history.js:
import { createBrowserHistory } from 'history'
export default createBrowserHistory()
使用Router
并为其提供您的history
对象:
import history from '../path/to/history'
import { Router } from 'react-router-dom'
// ...
return (
<Router history={history}>
<App/>
</Router>
)
现在,您可以在 Action 创建器文件中轻松导入和使用历史记录
。
任何 js 文件:
import history from '../path/to/history'
// ...
history.push("/some/path")
相关:Why is 'history' necessary in the Router of React-Router-Dom?
注意:使用 Router
不会阻止您像您一样使用 useHistory
Hook 或 withRouter
HOC通常使用,即您仍然可以在其他 React 组件中使用钩子(Hook)或 HOC 来获取历史记录
。
关于reactjs - 我无法在操作创建者文件中使用 useHistory 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67347821/