javascript - useLocation 抛出对象不是函数

Question

尝试使用react-router-dom 5.1中引入的useLocation钩子(Hook)，但抛出错误 - 对象不是函数。

我在下面粘贴了代码要点

使用

react - 16.13

react 路由器-dom - 5.2.0

App.js

<Router>
  <Switch>
    <Redirect exact from='/' to='/home' />
    <Route id='home' path='/home' component={Home} />

  </Switch>
</Router>

Home.js

import { useLocation } from 'react-router-dom';

function Home() {
  const [loc] = useLocation(); // throwing an error here
  console.log('ProductList -> loc', loc);
  
   return <div>Home</div>
}

Home.js:81 Uncaught TypeError: Object is not a function
    at PodList (Home.js:81)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.render (react-dom.development.js:24840)
    at Module../src/index.js (index.js:19)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:150)
    at Object.1 (utils.js:418)
    at __webpack_require__ (bootstrap:789)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Answer 1

升级到最新版本的react-router-dom，他们已经修复了。我在 5.0.0 版本中遇到了这个问题，然后我更新到 5.2.0 并且它得到了修复。