kibana/packages/shared-ux/router/impl
Rachel Shen 50a4fc4916
[Shared UX] Adoption of Shared UX Route component (#150357)
## Summary

This PR removes all imports of Route from react-router-dom and
'@kbn/kibana-react-plugin/public' and instead imports Route from
@kbn/shared-ux-router.

### Context
Based on
https://github.com/elastic/kibana/issues/132629#issue-1243243678 This PR
executes steps 2 - 4:

> 2. To make the transition easier, we want to re-export other
react-router-dom exports alongside the modified' Route'.
> 3. Solutions should start using that Route component in place of the
one from react-router-dom. I.e. replace all occurrences of import { ...
} from 'react-router-dom' with import { ... } from
'@kbn/shared-ux-router'.
> 4. All manual calls to useExecutionContext are not needed anymore and
should be removed.

### Future PR

Looks like this might be getting worked on in:
https://github.com/elastic/kibana/pull/145863 (thanks!)

> Introduce an ESlint rule that ensures that react-router-dom is not
used directly in Kibana and that imports go through the new
@kbn/shared-ux-router package.

This is tangentially accomplished through
https://github.com/elastic/kibana/pull/150340 but only addresses using
Route through @kbn/kibana-react-plugin/public'


### Checklist

Delete any items that are not applicable to this PR.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Tiago Costa <tiagoffcc@hotmail.com>
2023-02-14 19:25:04 +00:00
..
__snapshots__ [Shared UX] Migrate router from kibana react to shared ux (#138544) 2022-09-09 11:21:17 -07:00
index.ts [Shared UX] Migrate router from kibana react to shared ux (#138544) 2022-09-09 11:21:17 -07:00
jest.config.js [Shared UX] Migrate router from kibana react to shared ux (#138544) 2022-09-09 11:21:17 -07:00
kibana.jsonc [codeowners] rename global experience to @elastic/appex-sharedux 2023-01-18 10:02:49 -07:00
package.json Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
README.mdx [Shared UX] Migrate router from kibana react to shared ux (#138544) 2022-09-09 11:21:17 -07:00
router.test.tsx [Shared UX] Migrate router from kibana react to shared ux (#138544) 2022-09-09 11:21:17 -07:00
router.tsx [Shared UX] Adoption of Shared UX Route component (#150357) 2023-02-14 19:25:04 +00:00
services.ts [Shared UX] Migrate router from kibana react to shared ux (#138544) 2022-09-09 11:21:17 -07:00
tsconfig.json Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
types.ts [Shared UX] Migrate router from kibana react to shared ux (#138544) 2022-09-09 11:21:17 -07:00
use_execution_context.ts [Shared UX] Migrate router from kibana react to shared ux (#138544) 2022-09-09 11:21:17 -07:00

---
id: sharedUX/Router
slug: /shared-ux/router
title: Router
description: A router component
tags: ['shared-ux', 'component', 'router', 'route']
date: 2022-08-12
---

## Summary
This is a wrapper around the `react-router-dom` Route component that inserts MatchPropagator in every application route. It helps track all route changes and send them to the execution context, later used to enrich APM 'route-change' transactions.
The component does not require any props and accepts props from the RouteProps interface such as a `path`, or a component like `AppContainer`. 


```jsx 
<Route path="/url" />
```

### Explanation of RouteProps

```jsx
export interface RouteProps {
    location?: H.Location; 
    component?: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>; 
    render?: (props: RouteComponentProps<any>) => React.ReactNode; 
    children?: ((props: RouteChildrenProps<any>) => React.ReactNode) | React.ReactNode; 
    path?: string | string[]; 
    exact?: boolean; 
    sensitive?: boolean; 
    strict?: boolean; 
}
```

All props are optional 

| Prop Name | Prop Type | Description |
|---|---|---|
| `location` | `H.Location` | the location of one instance of history |
| `component` | `React.ComponentType<RouteComponentProps<any>>` or `React.ComponentType<any>;` | a react component |
| `render` | `(props: RouteComponentProps<any>) => React.ReactNode;` | render props to a react node|
| `children` | `((props: RouteChildrenProps<any>) => React.ReactNode)` or `React.ReactNode;` | pass children to a react node |
| `path` | `string` or `string[];` | a url path or array of paths |
| `exact` | `boolean` | exact match for a route (see: https://stackoverflow.com/questions/52275146/usage-of-exact-and-strict-props) |
| `sensitive` | `boolean` | case senstive route |
| `strict` | `boolean` | strict entry of the requested path in the path name |



This component removes the need for manual calls to `useExecutionContext` and they should be removed. 

## EUI Promotion Status

This component is not currently considered for promotion to EUI.