在 React Component 上使用包装函数以使用浏览器路由器验证用户登录时如何修复

Question

我正在构建一个 React 应用程序并处理它的用户身份验证。目前我正在使用来自“react-router-dom”的 BrowserRouter 来管理我的应用程序中的路由。我有一个注册路由，所有其他路由组件都包含在一个函数“withAuth”中。'withAuth' 的作用是查看应用程序是否对使用进行了身份验证。如果用户通过身份验证，组件应该加载（问题在这里！）否则它应该被重定向到登录组件（工作正常！）。当应用程序重定向到组件包含在“withAuth”函数中的路径时，登录后。我收到以下错误：TypeError: Object(...) is not a function (anonymous function) F:/Projects/beyouplus/beyouplus/beyouplus-client/src/services/auth.service.js:1411 | 返回 useContext(MyContext)12 | }13 |>14 | export const withAuth = (Component) => (props) => {15 | 如果 (!isSignedIn()) {16 | if (props.history.location.pathname === '/sign-in') {17 | 返回空值我的 App.js：import React from 'react';import {  BrowserRouter,  Route,  Redirect} from 'react-router-dom'// Import Screensimport SignInScreen from './components/SignInScreen'import DepartmentScreen from './components/DepartmentScreen'// Import Servicesimport { withAuth } from './services/auth.service'const App = () => (  <BrowserRouter>    <Route exact path="/sign-in" component={SignInScreen}/>    <Route exact path="/dept" component={withAuth(DepartmentScreen)}/>    <Route exact path="/" render={redirectToDept} />  </BrowserRouter>)const redirectToDept = () => (  <Redirect to="/dept" />)export default App;auth.service.js 文件：import React, { useContext } from 'react'import { Redirect } from 'react-router-dom'import client from '../client'import { getMeQuery } from '../graphql/queries'import { useCacheService } from './cache.service'const MyContext = React.createContext(null)export const useMe = () => {    return useContext(MyContext)}export const withAuth = (Component) => (props) => {    if (!isSignedIn()) {        if (props.history.location.pathname === '/sign-in') {            return null        }        return (            <Redirect to="/sign-in" />        )    }    const { data, error, loading } = getMeQuery()    useCacheService()    if(loading) return null    if(error || !data.me) {        signOut()        return <Redirect to="/sign-in" />    }    console.log(data.me)