mirror of
https://github.com/elastic/kibana.git
synced 2025-07-01 12:33:23 -04:00
## 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> |
||
---|---|---|
.. | ||
__snapshots__ | ||
index.ts | ||
jest.config.js | ||
kibana.jsonc | ||
package.json | ||
README.mdx | ||
router.test.tsx | ||
router.tsx | ||
services.ts | ||
tsconfig.json | ||
types.ts | ||
use_execution_context.ts |
--- 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.