Javascript 无法读取属性'；地点'；未定义的类型（useLocation（））

当我尝试使用useLocation（）时，我遇到以下错误：TypeError:无法读取未定义的属性“location”。我从react路由器dom完美地导入了useLocation，但是发生了这个错误。我怎样才能修好它

import React, { createContext, useEffect, useState } from 'react';
import { Route, Switch, useLocation } from 'react-router-dom';
import { getCurrentUser, handleSignOut } from './components/login/HandleLogin';
import Login from './components/login/Login';
import Booking from './components/booking/Booking';
import Header from './components/shared/header/Header';
import Home from './components/home/Home';
import PrivateRoute from './components/privateRoute/PrivateRoute';
import Search from './components/search/Search';

export const UserContext = createContext();
function App() {
  const location = useLocation();
  const [user, setUser] = useState(null);
  const [bookingInfo, setBookingInfo] = useState({});
  useEffect(() => {
    getCurrentUser().then(res => {
      setUser(res)
    })
  }, [])
  const signOUtUser = () => {
    handleSignOut().then(res => {
      setUser(res)
    })
  }
  return (
    <UserContext.Provider value={{ user, setUser, bookingInfo, setBookingInfo, signOUtUser }}>
      <div className={`${location.pathname === '/' || location.pathname.includes('booking') ? "home" : ""}`}>
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/booking/:id" component={Booking} />
          <PrivateRoute path="/search/:id">
            <Search />
          </PrivateRoute>
          <Route path="/login" component={Login} />
        </Switch>
      </div>
    </UserContext.Provider>
  );
}

export default App;

import React，{createContext，useffect，useState}来自'React'；
从“react router dom”导入{Route，Switch，useLocation}；
从“./components/login/HandleLogin”导入{getCurrentUser，handleSignOut}；
从“./components/Login/Login”导入登录名；
从“./组件/预订/预订”导入预订；
从“./components/shared/Header/Header”导入标题；
从“./components/Home/Home”导入Home；
从“/components/PrivateRoute/PrivateRoute”导入PrivateRoute；
从“./components/Search/Search”导入搜索；
export const UserContext=createContext（）；
函数App（）{
const location=useLocation（）；
const[user，setUser]=useState（null）；
const[bookininfo，setbookininfo]=useState（{}）；
useffect（（）=>{
getCurrentUser（）。然后（res=>{
设置用户（res）
})
}, [])
const signOUtUser=（）=>{
handleSignOut（）。然后（res=>{
设置用户（res）
})
}
返回(
);
}
导出默认应用程序；

---

显示错误位置未定义。

使用浏览器路由器

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

---

您是否尝试过安慰您正在声明的位置常数？这是否也会返回未定义的结果？只是在未定义位置时不要渲染任何内容，因为组件依赖于it@bel3atar知道了。谢谢