reactjs - 我无法在操作创建者文件中使用 useHistory 函数

Question

我正在使用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 });
      }
    };

Answer 1

您不能在 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 来获取历史记录。