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

Question

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

这就是我正在做的事情：

    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;
}

这里有更多信息的截图：

error message

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

感谢您的宝贵时间。

编辑：

感谢@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

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

要解决此问题，您需要将 React 至少升级到 v16.8.0（最好是最新的，以准备 React Router v6 有望在今年年初或年中发布）。