Add react-router-dom-v5-compat (#159173)

## Summary

Prep work for bumping react-router to v6
Following https://github.com/remix-run/react-router/discussions/8753

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Patryk Kopyciński 2023-06-14 14:13:15 +02:00 committed by GitHub
parent 2fba1b651e
commit 09577fa0af
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
42 changed files with 715 additions and 613 deletions

View file

@ -9,6 +9,7 @@
import React from 'react';
import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
import { Router, Switch } from 'react-router-dom';
import { CompatRouter } from 'react-router-dom-v5-compat';
import { Route } from '@kbn/shared-ux-router';
import { EuiPageTemplate } from '@elastic/eui';
@ -45,27 +46,25 @@ export const GuidedOnboardingExampleApp = (props: GuidedOnboardingExampleAppDeps
{guidedOnboarding.guidedOnboardingApi?.isEnabled ? (
<EuiPageTemplate.Section>
<Router history={history}>
<Switch>
<Route exact path="/">
<Main notifications={notifications} guidedOnboarding={guidedOnboarding} />
</Route>
<Route exact path="/stepOne">
<StepOne guidedOnboarding={guidedOnboarding} />
</Route>
<Route exact path="/stepTwo">
<StepTwo />
</Route>
<Route exact path="/stepThree">
<StepThree guidedOnboarding={guidedOnboarding} />
</Route>
p
<Route
path="/stepFour/:indexName?"
render={(routeProps) => (
<StepFour guidedOnboarding={guidedOnboarding} {...routeProps} />
)}
/>
</Switch>
<CompatRouter>
<Switch>
<Route exact path="/">
<Main notifications={notifications} guidedOnboarding={guidedOnboarding} />
</Route>
<Route exact path="/stepOne">
<StepOne guidedOnboarding={guidedOnboarding} />
</Route>
<Route exact path="/stepTwo">
<StepTwo />
</Route>
<Route exact path="/stepThree">
<StepThree guidedOnboarding={guidedOnboarding} />
</Route>
<Route path="/stepFour/:indexName?">
<StepFour guidedOnboarding={guidedOnboarding} />
</Route>
</Switch>
</CompatRouter>
</Router>
</EuiPageTemplate.Section>
) : (

View file

@ -17,19 +17,16 @@ import {
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiCode,
} from '@elastic/eui';
import { RouteComponentProps } from 'react-router-dom';
import { useParams } from 'react-router-dom';
interface StepFourProps {
guidedOnboarding: GuidedOnboardingPluginStart;
}
export const StepFour = (props: StepFourProps & RouteComponentProps<{ indexName: string }>) => {
const {
guidedOnboarding: { guidedOnboardingApi },
match: {
params: { indexName },
},
} = props;
export const StepFour: React.FC<StepFourProps> = ({
guidedOnboarding: { guidedOnboardingApi },
}) => {
const { indexName } = useParams<{ indexName: string }>();
const [, setIsTourStepOpen] = useState<boolean>(false);