javascript - 无法读取未定义的属性“位置”(useLocation())
问题描述
当我尝试使用 useLocation() 时,出现此错误:TypeError:无法读取未定义的属性“位置”。我完美地从 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;
显示错误位置未定义。
解决方案
使用BrowserRouter。
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
推荐阅读
- spring-cloud-stream - 供应商绑定不适用于 spring cloud stream rabbit
- javascript - 更改 HTML
在 Flask 可变负载上使用 JavaScript 标记
- c++ - 当空基类也是成员变量时,为什么禁止空基优化?
- android - Android 预览不显示自定义视图,但在设备上可见
- java - 将异常与结构化参数一起记录
- python - Python。解析 csv 文件。如果下一行有重复值,则将值附加到上一行
- python - 如何根据列内容重新组织熊猫数据框
- linux - 如何在linux中杀死crontab脚本的旧进程
- r - 导入包的 S3 方法而不导入其函数
- c++ - 如果 constexpr 在 lambda 中带有 static_assert,哪个编译器是正确的?