Question

我想在我的 React 应用程序中集成一个 AI 语音助手 Alan AI
所以基本上想使用语音命令重定向页面。

但问题是，我想使用 useHistory 钩子的 push 方法来更改页面，但是每当我访问它是 undefined 的变量时，我不想使用 window.location.href 作为它每次都会刷新应用程序，

任何人都可以建议我使用这个钩子/或任何其他替代方法我错在哪里

import { useCallback, useEffect, useState } from "react";
import { useHistory } from "react-router-dom";

import { useCartContext } from "../context/cart_context";
import { useThemeContext } from "../context/theme_context";

import alanBtn from "@alan-ai/alan-sdk-web";

const COMMANDS = {
  OPEN_CART: "open-cart",
  TOGGLE_THEME: "toggle-theme",
};

const useAlan = () => {
  let history = useHistory();
  const { theme, toggleTheme } = useThemeContext();
  const { cart } = useCartContext();

  const [alanInstance, setAlanInstance] = useState(null);

  const openCart = useCallback(() => {
    if (cart.length < 1) {
      alanInstance.playText("cart is empty");
      return;
    }
    alanInstance.playText("opening cart");

    history.push("/cart");
    // window.location.href = "/cart";
  }, [alanInstance]);

  const changeTheme = useCallback(() => {
    alanInstance.playText("changing theme");
    toggleTheme();
  });

  useEffect(() => {
    window.addEventListener(COMMANDS.OPEN_CART, openCart);
    window.addEventListener(COMMANDS.TOGGLE_THEME, changeTheme);
    return () => {
      window.removeEventListener(COMMANDS.OPEN_CART, openCart);
      window.removeEventListener(COMMANDS.TOGGLE_THEME, changeTheme);
    };
  }, [openCart, changeTheme]);

  useEffect(() => {
    // history.push("/cart");
    // this also gives same error

    if (alanInstance != null) return;
    setAlanInstance(
      alanBtn({
        key: process.env.REACT_APP_ALAN_KEY,
        onCommand: ({ command }) => {
          window.dispatchEvent(new CustomEvent(command));
        },
      })
    );
  }, []);
  return null;
};

export default useAlan;

一切正常，检测到语音并运行 openCart 功能，只是 history 未定义

错误：

TypeError: Cannot read property 'push' of undefined
(anonymous function)
C:/Users/Sachin Verma/Desktop/Web Dev/React-E-Commerce-v2/src/hooks/useAlan.js:28
  25 |    }
  26 |    alanInstance.playText("opening cart");
  27 | 
> 28 |    history.push("/cart");
     | ^  29 |    // window.location.href = "/cart";
  30 |  }, [alanInstance]);
  31 |

App.js 代码：

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

import { useThemeContext } from "./context/theme_context";
import useAlan from "./hooks/useAlan";

import { Navbar, Sidebar, Footer } from "./components";
import {
  Home,
  SingleProduct,
  Cart,
  Checkout,
  Error,
  About,
  Products,
  PrivateRoute,
  AuthWrapper,
  Scan,
  History,
  ItemList,
} from "./pages";

function App() {
  const { theme } = useThemeContext();

  useAlan();

  useEffect(() => {
    if (theme === "dark-theme") {
      // set dark mode theme
      document.documentElement.className = "dark-theme";
    } else {
      // remove dark mode
      document.documentElement.className = "light-theme";
    }
  }, [theme]);

  return (
    <AuthWrapper>
      <Router>
        <Navbar />
        <Sidebar />

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>

          <Route exact path="/about">
            <About />
          </Route>

          <Route exact path="/cart">
            <Cart />
          </Route>

          <Route exact path="/products">
            <Products />
          </Route>

          <PrivateRoute exact path="/history">
            <History />
          </PrivateRoute>

          <PrivateRoute exact path="/scan">
            <Scan />
            <ItemList />
          </PrivateRoute>

          <Route exact path="/products/:id" children={<SingleProduct />} />

          <PrivateRoute exact path="/checkout">
            <Checkout />
          </PrivateRoute>

          <Route path="*">
            <Error />
          </Route>
        </Switch>
        <Footer />
      </Router>
    </AuthWrapper>
  );
}

export default App;

Answer 1

当您没有将应用程序正确嵌套在为 Router 对象提供上下文的有效 history 中时，会发生这种情况。确保您的顶级代码放在正确的 Router 对象上下文中：

import { BrowserRouter } from "react-router-dom";

function App() {
    return (
        <BrowserRouter>
            ...(components that use react-router-hooks)
        </BrowserRouter>
    );
}

同样适用于 React-Native：NativeRouter。

Answer 2

如果您在 App.js 中工作，则需要移动您的

<Router> </Router>

到你的 index.js

并像这样包装它：

 <Router>
    <App />
 </Router>

它应该像魅力一样发挥作用。

反应自定义钩子中未定义 useHistory

2 个答案: