# useNavigate() and useSearchParams() gives Object(...) is not a function error

**URL:** https://discuss.elastic.co/t/usenavigate-and-usesearchparams-gives-object-is-not-a-function-error/336955
**Category:** Kibana
**Tags:** kibana-plugin-development
**Created:** [June 27, 2023, 8:42am UTC](https://discuss.elastic.co/t/usenavigate-and-usesearchparams-gives-object-is-not-a-function-error/336955 "2023-06-27T08:42:22Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Sheereen](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sheereen/32/122005_2.png) [@Sheereen](https://discuss.elastic.co/u/Sheereen)
#### Post date: [June 27, 2023, 8:42am UTC](https://discuss.elastic.co/t/usenavigate-and-usesearchparams-gives-object-is-not-a-function-error/336955/1 "2023-06-27T08:42:22Z")

</div>

Hi,

I am developing a custom plugin using **React** in **Kibana main branch (8.9)**.

When I use **useSearchParams()** or **useNavigate()** from **react-router v6** , I get an error in the browser saying **Object(...) is not a function**. But works well with **useParams()**. The code is not complicated. It is just simple function call to see if the above 2 works.

**Stack trace of error:**

```auto
Object(...) is not a function
 Overview @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/plugin/my_plugin/1.0.0/my_plugin.chunk.0.js:12459
 <unknown> @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:166030
 <unknown> @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:166030
 EuiPageSection @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:129866
 <unknown> @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:166030
 EuiPageBody @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:128929
 <unknown> @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:166030
 EuiPage @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:128783
 ErrorBoundaryClass @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/plugin/my_plugin/1.0.0/my_plugin.chunk.0.js:8937
 ConnectFunction @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/plugin/my_plugin/1.0.0/my_plugin.chunk.0.js:6572
 Route @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:360863
 Route @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/plugin/my_plugin/1.0.0/my_plugin.chunk.0.js:1270
 Router @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:360492
 BrowserRouter @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:360097
 Provider @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/plugin/my_plugin/1.0.0/my_plugin.chunk.0.js:6277
 ReduxProvider @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/plugin/my_plugin/1.0.0/my_plugin.chunk.0.js:14466
 Provider @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/plugin/kibanaReact/1.0.0/kibanaReact.plugin.js:1794

```

**The code:**

```auto
import React, { Fragment} from 'react';
import {
  Link,
  useNavigate,
  useSearchParams
} from 'react-router-dom';

export const Overview = () => {
  const navigate = useNavigate();
  console.log(navigate);
  // const [searchParams, setsearchParams] = useSearchParams(); 
  // console.log(searchParams);

  return (
    <Fragment>
      <button onClick={() => navigate('orders')}>
        Go to orders
      </button>
    </Fragment>
  );
};

```

Moreover, I am using a different version of react-router, than the one being using by the kibana parent folder.  
**Kibana =\> React-router v5**  
**Plugin =\> React-router v6**  
Please refer to this question ([Is it okay to use different react-router version in plugin?](https://discuss.elastic.co/t/is-it-okay-to-use-different-react-router-version-in-plugin/336874))

Thanks

---

<div class="post-metadata">

### Author: ![Sheereen](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sheereen/32/122005_2.png) [@Sheereen](https://discuss.elastic.co/u/Sheereen)
#### Post date: [June 29, 2023, 9:59am UTC](https://discuss.elastic.co/t/usenavigate-and-usesearchparams-gives-object-is-not-a-function-error/336955/2 "2023-06-29T09:59:45Z")

</div>

Can anyone pls look into this?

Been stuck on this for a couple of weeks now

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)
#### Post date: [July 27, 2023, 10:00am UTC](https://discuss.elastic.co/t/usenavigate-and-usesearchparams-gives-object-is-not-a-function-error/336955/3 "2023-07-27T10:00:32Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.