mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
a1d02824f1
## Summary Why? To simplify the process of migration to react-router@6. https://github.com/remix-run/react-router/discussions/8753 What problems exactly it solves? - In my previous PR I added `CompatRouter` https://github.com/elastic/kibana/pull/159173, which caused changes in ~50 files and pinged 15 Teams. And this is just meant to be a temporary change, so when we're done with the migration I would have to revert these changes and engage everyone to review the PR again. And it is just a single step in the migration strategy. So to make our lives easier I think it would be better to have a common place where we do import our router components because it will allow us to surface some extra logic in single place instead of going through the whole source code again. - `react-router@6` doesn't support a custom `Route` component, so that means our custom `Route` component that we're using almost everywhere today, will need to be replaced by a different solution. I have decided to add `Routes` component, which will be responsible for rendering the proper component (`react-router@6` renamed `Switch` to `Routes`, so I have named this component to align with the dictionary of the new router) and also is going to add the logic that today is done in `Route` (moving logic to `Routes` will be done in the follow-up PR, here I just wanted to focus on using the common router components to make the review process easier) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| __snapshots__ | ||
| index.ts | ||
| jest.config.js | ||
| kibana.jsonc | ||
| package.json | ||
| README.mdx | ||
| route.test.tsx | ||
| route.tsx | ||
| router.tsx | ||
| routes.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.