无法读取未定义的属性“位置”（useLocation（））

Question

当我尝试使用 useLocation() 时出现此错误：TypeError: Cannot read property 'location' of undefined。我完美地从 react-router-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;

显示错误位置未定义。

Answer 1

使用 BrowserRouter .

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