history.push()在使用react上下文时未定义(Ionic-React)

Question

UseHistory钩子在试图推送到另一个页面时表示未定义，同时试图在异步函数之后以编程方式导航。

上下文

import React, { createContext, useContext, useReducer, useState } from "react";
import AuthReducer from "./reducers/AuthReducer";
import axios from "axios";
import { UserState } from "./types";
import { useHistory } from "react-router-dom";
import { Plugins } from "@capacitor/core";
import { NavContext } from "@ionic/react";

// Initial State
const initialState: UserState = {
  user: {},
  error: null,
  loading: true,
  location: {},
  getLocation: () => {},
  UserLogin: () => {},
  UserRegister: () => {},
};

// Create Context
export const AuthContext = createContext<UserState>(initialState);

// Provider
export const AuthProvider: React.FC = ({ children }) => {
  const URL = "https://backend.com/api/v1/auth";
  const [state, dispatch] = useReducer(AuthReducer, initialState);
  const [location, setLocation] = useState<object>({ long: "", lat: "" });
  const [user, setUser] = useState();
  const { Toast, Geolocation } = Plugins;
  const { navigate } = useContext(NavContext);
  const history = useHistory();

  // Get Location
  const getLocation = async () => {
    try {
      const coordinates = await Geolocation.getCurrentPosition();
      const lat = coordinates.coords.latitude;
      const long = coordinates.coords.longitude;
      setLocation({
        long,
        lat,
      });
      console.log(location);
    } catch (error) {
      console.log(error);
    }
  };

  getLocation();

  // Login
  const UserLogin = async (user: any) => {
    try {
      const res: any = await axios.post(`${URL}/login`, user, {
        headers: { "Content-Type": "application/json" },
      });
      dispatch({
        type: "LOGIN",
        user: res.data,
      });
      console.log(res.data);
      await Toast.show({
        text: "Login successfully",
        duration: "short",
        position: "bottom",
      });
      setUser(res.data);
      alert("Done");
      history.push("/dashboard/Home");
      // navigate("/dashboard/", "forward", "push");
    } catch (error) {
      dispatch({
        type: "USER_ERROR",
        payload: error.message,
      });
      console.log(error.message);
      await Toast.show({
        text: `${error.message}`,
        duration: "short",
        position: "bottom",
      });
    }
  };

  // Register
  const UserRegister = async (user: any) => {
    try {
      const res = await axios.post(`${URL}/signup`, user, {
        headers: { "Content-Type": "application/json" },
      });
      dispatch({
        type: "REGISTER",
        user: res.data,
      });
      console.log(res.data);
      await Toast.show({
        text: "Account created successfully",
        duration: "short",
        position: "bottom",
      });
      alert("Done");
      history.push("/login");
    } catch (error) {
      dispatch({
        type: "USER_ERROR",
        payload: error.message,
      });
      console.log(error.message);
      await Toast.show({
        text: `${error.message}`,
        duration: "short",
        position: "bottom",
      });
    }
  };

  return (
    <AuthContext.Provider
      value={{
        user: state.user,
        loading: state.loading,
        error: state.error,
        location,
        getLocation,
        UserLogin,
        UserRegister,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

求你了我想我错过了什么..。我想在登录和注册操作之后以编程方式导航到我的仪表板。即使我尝试使用NavContext

Answer 1

您需要用withRouter()包装组件

​

export default withRouter(AuthProvider)

​

不要忘记先导入它：

​

import { useHistory, withRouter } from "react-router-dom";

​