Route to pages in plugin

Elastic Stack Kibana
1

Hi,

I am creating an external plugin in React.
How can i implement routes in plugin? Like giving path for different components/pages.
Is there any inbuilt way of doing the same in Kibana?... like there is for toast, http routes, ...

I would like to combine the same with Breadcrumbs thereafter.

Thanks,
Sheereen

2

Hello

Can someone please help me on this?

3

take a look at some of build in plugins on how they do that

this might be a good example:

(this is the route, check how its created and how the plugin registers it)

4

This is http routing in server side for api calls

I am talking about navigating between ui pages

I saw in many places, they are using Route from @kbn/shared-ux-router, which is not being included in package.json of new releases of Kibana.

So how should I go about this. Found links over here (Routing, Navigation and URL | Kibana Guide [8.8] | Elastic). But except for one, none works.

5

those docs might be outdated, i suggest you to check the code, maybe this example plugin can be helpful: kibana/plugin.tsx at main · elastic/kibana · GitHub

6

Thanks for the resource.

But as I said before, the above doc/example is for http routing.... meaning api calls from public->server->backend

What I am looking for is navigation. Navigating from 1 page to another and adding breadcrumbs in the process.

7

the above example (and a lot of other plugins) contain the client side routing part as well

8

I tried using React router.

I am using React router - 6.12

 <BrowserRouter>
    <Routes>
       <Route path="/" element={<HomePage />} />
       <Route path="/profile" element={<Profile/>} />
 </BrowserRouter>

And then used to access the Profile tab.

But it doesn't work... gives the following error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Moreover, in documentation (Routing, Navigation and URL | Kibana Guide [8.8] | Elastic) I saw we have to use history provided by core. But v6 of react-router doesn't have history.

The example you shared is not related to navigation between pages. I did not find n example for navigation, except for this (kibana/application.tsx at 8.8 · elastic/kibana · GitHub), which used old version of react-router (v4)

And in the examples I could fine, Route was being imported from '@kbn/shared-ux-router' (kibana/application.tsx at 8.8 · elastic/kibana · GitHub) .

import { Route } from '@kbn/shared-ux-router';

@kbn/shared-ux-router, is not there in package.json of Kibana. I am using version 8.5.3

9

Can I manually add this package?
@kbn/shared-ux-router

10

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