docs: update plugin create and reference docs for top-level routable extensions

This commit is contained in:
Patrik Oldsberg
2021-01-31 20:01:54 +01:00
parent fe3211cf38
commit 58a28f0b87
5 changed files with 74 additions and 79 deletions
-31
View File
@@ -1,31 +0,0 @@
---
id: createPlugin-router
title: createPlugin - router
description: Documentation on createPlugin - router
---
The router that is passed to the `register` function makes it possible for
plugins to hook into routing of the Backstage app and provide the end users with
new views to navigate to. This is done by utilising the following methods on the
`router`:
```typescript
addRoute(
target: RouteRef,
Component: ComponentType<any>,
options?: RouteOptions,
): void;
```
## RouteRef
`addRoute` method is using mutable RouteRefs, which can be created as following:
```ts
import { createRouteRef } from '@backstage/core';
const myPluginRouteRef = createRouteRef({
path: '/my-plugin',
title: 'My Plugin',
});
```
+3 -11
View File
@@ -17,32 +17,24 @@ type PluginConfig = {
};
type PluginHooks = {
router: RouterHooks;
featureFlags: FeatureFlagsHooks;
};
```
- [Read more about the router here](createPlugin-router.md)
- [Read more about feature flags here](createPlugin-feature-flags.md)
## Example Uses
### Creating a basic plugin
Showcasing adding a route and a feature flag.
Showcasing adding a feature flag.
```jsx
import { createPlugin, createRouteRef } from '@backstage/core';
import ExampleComponent from './components/ExampleComponent';
export const rootRouteRef = createRouteRef({
path: '/new-plugin',
title: 'New Plugin',
});
import { createPlugin } from '@backstage/core';
export default createPlugin({
id: 'new-plugin',
register({ router, featureFlags }) {
router.addRoute(rootRouteRef, ExampleComponent);
featureFlags.register('enable-example-component');
},
});