# Problem with react routing issue in Kibana Plugin

**URL:** https://discuss.elastic.co/t/problem-with-react-routing-issue-in-kibana-plugin/212719
**Category:** Kibana
**Created:** [December 21, 2019, 12:33am UTC](https://discuss.elastic.co/t/problem-with-react-routing-issue-in-kibana-plugin/212719 "2019-12-21T00:33:20Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![RaghibHuda](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/raghibhuda/32/59613_2.png) [@RaghibHuda](https://discuss.elastic.co/u/RaghibHuda)
#### Post date: [December 21, 2019, 12:33am UTC](https://discuss.elastic.co/t/problem-with-react-routing-issue-in-kibana-plugin/212719/1 "2019-12-21T00:33:20Z")

</div>

I am developing a Kibana Plugin. I have got an error like this

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app  
See [https://fb.me/react-invalid-hook-call](https://fb.me/react-invalid-hook-call) for tips about how to debug and fix this problem.  
at resolveDispatcher (react.development.js:1590)  
at useMemo (react.development.js:1642)  
at Provider (Provider.js:22)  
at renderWithHooks (react-dom.development.js:12839)  
at mountIndeterminateComponent (react-dom.development.js:14814)  
at beginWork (react-dom.development.js:15419)  
at performUnitOfWork (react-dom.development.js:19106)  
at workLoop (react-dom.development.js:19146)  
at HTMLUnknownElement.callCallback (react-dom.development.js:149)  
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)  
react-dom.development.js:16911 The above error occurred in the component:  
in Provider  
in PseudoLocaleWrapper (created by I18nProvider)  
in IntlProvider (created by I18nProvider)  
in I18nProvider

Consider adding an error boundary to your tree to customize error handling behavior.  
Visit [https://fb.me/react-error-boundaries](https://fb.me/react-error-boundaries) to learn more about error boundaries.

after I set up my custom router and store with connected-react-router package for my plugin

```
import React from 'react';
import { uiModules } from 'ui/modules';
import chrome from 'ui/chrome';
import { render, unmountComponentAtNode } from 'react-dom';
import { I18nProvider } from '@kbn/i18n/react';
import { ConnectedRouter } from 'connected-react-router';
import configureStore ,{history} from './store/store';
import { Provider } from 'react-redux';

import 'ui/autoload/styles';
import Main from './components/main/main';

const app = uiModules.get('apps/wmdcUserDashboard');
const store = configureStore();

app.config($locationProvider => {
    $locationProvider.html5Mode({
        enabled: false,
        requireBase: false,
        rewriteLinks: false,
    });
});
app.config(stateManagementConfigProvider =>
  stateManagementConfigProvider.disable(),
);

function RootController($scope, $element, $http) {
    const domNode = $element[0];

// render react to DOM with Dom Node aka Root Node
    render(
      <I18nProvider>
          <Provider store={store}>
              <ConnectedRouter history={history}>
                  <Main/>
              </ConnectedRouter>
          </Provider>
      </I18nProvider>,
      domNode,
    );

    $scope.$on('$destroy', () => {
        unmountComponentAtNode(domNode);
    });
}

chrome.setRootController('wmdcUserDashboard', RootController);

```

It seems like I have more than one react package in my app.  
Should I install npm packages in the plugin directory ? Or should I install it in the Kibana directory?  
If anyone has any suggestions about routing in the custom plugin , please suggest me best approaches . Thank you.

---

<div class="post-metadata">

### Author: ![bhavyarm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/bhavyarm/32/22392_2.png) [@bhavyarm](https://discuss.elastic.co/u/bhavyarm)
#### Post date: [December 24, 2019, 1:26am UTC](https://discuss.elastic.co/t/problem-with-react-routing-issue-in-kibana-plugin/212719/2 "2019-12-24T01:26:45Z")

</div>

@jbudz ops team question. Thanks!

---

<div class="post-metadata">

### Author: ![Nathan\_Reese](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nathan_reese/32/84829_2.png) [@Nathan\_Reese](https://discuss.elastic.co/u/Nathan_Reese)
#### Post date: [December 27, 2019, 11:59am UTC](https://discuss.elastic.co/t/problem-with-react-routing-issue-in-kibana-plugin/212719/3 "2019-12-27T11:59:42Z")

</div>

Does your app import its own version of react? Might be best to just use the version that ships with Kibana.

Here is an example plugin that sets up a react router that you can follow

> <https://github.com/elastic/kibana/blob/7.5/src/legacy/core_plugins/kibana/public/home/components/home_app.js#L63>

---

<div class="post-metadata">

### Author: ![RaghibHuda](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/raghibhuda/32/59613_2.png) [@RaghibHuda](https://discuss.elastic.co/u/RaghibHuda)
#### Post date: [January 1, 2020, 9:57am UTC](https://discuss.elastic.co/t/problem-with-react-routing-issue-in-kibana-plugin/212719/4 "2020-01-01T09:57:43Z")

</div>

Thanks , I solved this

---

<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: [January 29, 2020, 9:57am UTC](https://discuss.elastic.co/t/problem-with-react-routing-issue-in-kibana-plugin/212719/5 "2020-01-29T09:57:53Z")

</div>

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