# Is it okay to use different react-router version in plugin?

**URL:** https://discuss.elastic.co/t/is-it-okay-to-use-different-react-router-version-in-plugin/336874
**Category:** Kibana
**Tags:** kibana-plugin-development
**Created:** [June 26, 2023, 7:59am UTC](https://discuss.elastic.co/t/is-it-okay-to-use-different-react-router-version-in-plugin/336874 "2023-06-26T07:59:05Z")
**Posts on this page:** 10
**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 26, 2023, 7:59am UTC](https://discuss.elastic.co/t/is-it-okay-to-use-different-react-router-version-in-plugin/336874/1 "2023-06-26T07:59:05Z")

</div>

Hi,

I am developing a custom plugin in **React**.  
I am using a **different version of React Router** in my plugin, than the one being used by kibana.

**Kibana - react-router v5**  
**Plugin - react-router v6**

**versions.json in kibana source code folder**

```auto
{
  "notice": "This file is not maintained outside of the main branch and should only be used for tooling.",
  "versions": [
    {
      "version": "8.9.0",
      "branch": "main",
      "currentMajor": true,
      "currentMinor": true
    },
    {
      "version": "8.8.2",
      "branch": "8.8",
      "currentMajor": true,
      "previousMinor": true
    },
    {
      "version": "7.17.11",
      "branch": "7.17",
      "previousMajor": true
    }
  ]
}

```

**Router packages in package.json of Kibana folder**

```auto
cat ../../package.json | grep router
    "@kbn/core-http-router-server-internal": "link:packages/core/http/core-http-router-server-internal",
    "@kbn/shared-ux-router": "link:packages/shared-ux/router/impl",
    "@kbn/shared-ux-router-mocks": "link:packages/shared-ux/router/mocks",
    "@kbn/shared-ux-router-types": "link:packages/shared-ux/router/types",
    "@kbn/typed-react-router-config": "link:packages/kbn-typed-react-router-config",
    "react-router": "^5.2.0",
    "react-router-config": "^5.1.1",
    "react-router-dom": "^5.2.0",
    "@kbn/core-http-router-server-mocks": "link:packages/core/http/core-http-router-server-mocks",
    "@types/react-router": "^5.1.7",
    "@types/react-router-config": "^5.0.2",
    "@types/react-router-dom": "^5.1.5",

```

**Router packages in package.json of my plugin folder**

```auto
"dependencies": {
    "axios": "^1.3.4",
    "file-saver": "^2.0.5",
    "node-localstorage": "^2.2.1",
    "react-full-screen": "^1.1.1",
    "react-redux": "^8.0.5",
    "react-router": "^6.12.1",
    "react-router-dom": "^6.12.1"
  },
  "devDependencies": {
    "@types/node-localstorage": "^1.3.0",
    "stacktrace-parser": "^0.1.10"
  }

```

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, 10:02am UTC](https://discuss.elastic.co/t/is-it-okay-to-use-different-react-router-version-in-plugin/336874/2 "2023-06-29T10:02:34Z")

</div>

Can anyone pls look into this? Can I use different versions of react-router?

---

<div class="post-metadata">

### Author: ![Dzmitry](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dzmitry/32/65026_2.png) [@Dzmitry](https://discuss.elastic.co/u/Dzmitry)
#### Post date: [July 5, 2023, 9:24am UTC](https://discuss.elastic.co/t/is-it-okay-to-use-different-react-router-version-in-plugin/336874/3 "2023-07-05T09:24:17Z")

</div>

Hi @Sheereen,

Sorry for the late reply. We are currently in the preparation process before update to react-router v6 on the [main](https://github.com/elastic/kibana/tree/main) branch, e.g. this [PR](https://github.com/elastic/kibana/pull/159173)  
There is no ETA and it might take a while due to the amount of changes and required verification on our side.

If you decide to develop your plugin with **react-router v6** already now there are chances things won't work properly on your end and you have to wait for us to finish the updates.

In the end, it is up to you to take a risk or use **react-router v5** for now and make updates later.

Best regards, Dima

---

<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: [July 5, 2023, 10:09am UTC](https://discuss.elastic.co/t/is-it-okay-to-use-different-react-router-version-in-plugin/336874/4 "2023-07-05T10:09:51Z")

</div>

Okay... Thanks a lot for the reply and clarification

In that case, using v5 would be better. Becoz I am facing some issues in having the history of my plugin in sync with Kibana history.

Moreover, just to bring to your attention, in routing examples ([Routing, Navigation and URL | Kibana Guide [8.8] | Elastic](https://www.elastic.co/guide/en/kibana/current/kibana-navigation.html#routing)), they are using a '@kbn/shared-ux-router' for setting up the routes ([kibana/test/plugin\_functional/plugins/core\_plugin\_a/public/application.tsx at 8.8 · elastic/kibana · GitHub](https://github.com/elastic/kibana/blob/8.8/test/plugin_functional/plugins/core_plugin_a/public/application.tsx#L13)) - which is not inclded in package.json of Kibana 8.5.3.

Thanks

---

<div class="post-metadata">

### Author: ![Dzmitry](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dzmitry/32/65026_2.png) [@Dzmitry](https://discuss.elastic.co/u/Dzmitry)
#### Post date: [July 5, 2023, 11:36am UTC](https://discuss.elastic.co/t/is-it-okay-to-use-different-react-router-version-in-plugin/336874/5 "2023-07-05T11:36:14Z")

</div>

'kbn/shared-ux-router' is a relatively new change [kibana#150357](https://github.com/elastic/kibana/pull/150357) and should help solving the issue of picking the right dependency yourself.  
I don't know much details here, but most likely due to change complexity it wasn't backported and is available only in Kibana 8.8.0 & above.

It might be an extra challenge, if you would like your plugin to work on the earlier Kibana version.

Regards, Dima

---

<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: [July 5, 2023, 11:43am UTC](https://discuss.elastic.co/t/is-it-okay-to-use-different-react-router-version-in-plugin/336874/6 "2023-07-05T11:43:13Z")

</div>

I was working on 8.5.3 initially, but then found even though routing example in the same is using **@kbn/shared-ux-router** , it is not included in 8.5.3 package.json. So I **moved to 8.8.1** , and is planning to continue on the same.

In that case, based on what u said and my understanding, it will be better to use **@kbn/shared-ux-router** and **react-router-v5** right?

---

<div class="post-metadata">

### Author: ![Dzmitry](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dzmitry/32/65026_2.png) [@Dzmitry](https://discuss.elastic.co/u/Dzmitry)
#### Post date: [July 5, 2023, 11:56am UTC](https://discuss.elastic.co/t/is-it-okay-to-use-different-react-router-version-in-plugin/336874/7 "2023-07-05T11:56:43Z")

</div>

It will be better to use solely **@kbn/shared-ux-router**.  
Moreover, you should see lint error on trying to import from `react-router-dom`:

`Please use @kbn/shared-ux-router instead`

---

<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: [July 5, 2023, 12:08pm UTC](https://discuss.elastic.co/t/is-it-okay-to-use-different-react-router-version-in-plugin/336874/8 "2023-07-05T12:08:39Z")

</div>

Thanks a lot... had been stuck on this for a while

---

<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: [July 7, 2023, 12:28pm UTC](https://discuss.elastic.co/t/is-it-okay-to-use-different-react-router-version-in-plugin/336874/9 "2023-07-07T12:28:08Z")

</div>

According to [Routing, Navigation and URL | Kibana Guide [8.8] | Elastic](https://www.elastic.co/guide/en/kibana/current/kibana-navigation.html#routing), we have to use BrowserRouter. But in the example plugin([Routing, Navigation and URL | Kibana Guide [8.8] | Elastic](https://www.elastic.co/guide/en/kibana/current/kibana-navigation.html#routing:~:text=Example%20usage-,Example%20plugin,-Relative%20links%20will)), it is shown to use Router.

Which one is a better approach?

---

<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: [August 4, 2023, 12:28pm UTC](https://discuss.elastic.co/t/is-it-okay-to-use-different-react-router-version-in-plugin/336874/10 "2023-08-04T12:28:22Z")

</div>

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