import React from 'react' ; import ReactDOM from 'react-dom' ; import { BrowserRouter as Router , Route , RouteComponentProps } from 'react-router-dom' ; import { EuiPage , EuiText } from '@elastic/eui' ; import { AppMountParameters , CoreStart } from '../../../../../../../src/core/public' ; export interface AlertingExampleComponentParams { basename : string ; } const AlertingExampleApp = ( deps ) => { const { basename } = deps ; return ( < Router basename = { basename } > < EuiPage > < Route path = { `/rule/:id` } render = { ( props ) => { return ( < EuiText data - test - subj = "noop-title" > < h2 > View Rule { props . match . params . id } < /h2> < /EuiText>); } } /> < /EuiPage> < /Router>); } ; export const renderApp = ( core , deps , { appBasePath , element } ) => { ReactDOM . render ( < AlertingExampleApp basename = { appBasePath } { ... deps } / > , element ) ; return ( ) => ReactDOM . unmountComponentAtNode ( element ) ; } ;