javascript - useLocation throwing Object is not a function - Stack Overflow

admin管理员组

文章数量:1400124

Trying to use the useLocation hooks introduced in react-router-dom 5.1 but throws an error - Object is not a function .

I have pasted a gist of my code below

Using

react - 16.13

react-router-dom - 5.2.0

App.js

<Router>
  <Switch>
    <Redirect exact from='/' to='/home' />
    <Route id='home' path='/home' ponent={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

Trying to use the useLocation hooks introduced in react-router-dom 5.1 but throws an error - Object is not a function .

I have pasted a gist of my code below

Using

react - 16.13

react-router-dom - 5.2.0

App.js

<Router>
  <Switch>
    <Redirect exact from='/' to='/home' />
    <Route id='home' path='/home' ponent={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

• javascript
• reactjs
• react-router-dom

Share Improve this question Follow asked Aug 15, 2020 at 8:25 elvis_fernselvis_ferns 52411 gold badge66 silver badges1414 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Upgrade to the latest version of react-router-dom, they have fixed it. I was facing this issue in 5.0.0 version and then I updated to 5.2.0 and it got fixed.

useLocation hook does not return an array but the location object that represents the current URL. You can think about it like a useState that returns a new location whenever the URL changes.

Change your code:

const loc = useLocation();

If you look at the examples, you don't destructure useLocation's return value.

Change:

const [loc] = useLocation();

to:

const loc = useLocation();
//    ^^^−−−−−−−−−−−−−−−−−−−−− no destructuring ([])

Wrap your ponent with withRouter from react-router-dom. so that you'll receive location object in props

This might not be the solution for your query, but this will solve the use case for getting location object.

本文标签： javascriptuseLocation throwing Object is not a functionStack Overflow