如何在React v16.13.1中使用React Router v5和Hooks获取位置路径名

Question

我对React RouteruseLocation以及如何获取当前路径名有一些问题。

以下是我正在做的：

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

function Home(props) {
const [isHome, setIsHome] = useState(true);
const [isContents, setIsContents] = useState(false);
const [isUserProfile, setIsUserProfile] = useState(false);
let location = useLocation();
let history = useHistory();

console.log(location)
console.log(history)

function getCurrentLocation() {

}

function logout() {
const logger = fetch('/users/logout');
logger.then(logout => {
if (logout.ok) {
props.logout()
} else {
console.log('error', logout);
}
})
}


return (
<Router>
<div className={'container-fluid h-100'}>
<div className={'row'}>
<ul className={"nav nav-tabs"}>
<li className={"nav-item"}>
<Link to={'/home'}>1</Link>
</li>
<li className={"nav-item"}>
<Link to={'/contents'}>2</Link>
</li>
<li className={"nav-item"}>
<Link to={'/user'}>3</Link>
</li>
</ul>
</div>
<Switch>
<Route exact path={'/home'}>1</Route>
<Route path={'/contents'}>2</Route>
<Route path={'/user'}>3</Route>
</Switch>
</div>
</Router>
)
};

export default Home

我想获得currentLocationPathName以便应用一些自定义样式。当我制作console.log(location)时，这就是我得到的：

function useLocation() {
if (true) {
!(typeof useContext === "function") ?  true ? Object(tiny_invariant__WEBPACK_IMPORTED_MODULE_6__["default"])(false, "You must use React >= 16.8 in order to use useLocation()") : undefined : void 0;
}
return useContext(context).location;
}

以下是更多信息的屏幕截图：

错误消息

我想更好地了解如何使用这些钩子。

谢谢你抽出时间。

编辑：

感谢@Dance2die的回答，特别是这个推荐：

还要确保Home在路由器的树下使用(例如，BrowserRouter((子、孙等(

我没有将Home放在<Router></Router>树下。。。

现在它运行良好，我可以访问location.pathname。

Answer 1

useHistory和useLocation是函数，因此需要调用它们。

代替

let location = useLocation;
let history = useHistory

调用钩子函数。

👇
let location = useLocation()
👇
let history = useHistory()

还要确保Home在路由器的树下使用(例如(BrowserRouter((子、孙等(

---

OP编辑前的旧答案

v16.8.0中添加了挂钩。
https://github.com/facebook/react/blob/master/CHANGELOG.md#react-2

因此，消息告诉您不能将useLocation与React v16.3.1版本一起使用。

为了解决这个问题，您需要将React升级到至少v16.8.0(最好是最新的版本，以便为React Router v6做好准备，有望在今年年初或中期发布(。