import React from 'react' ; import ReactDOM from 'react-dom' ; import { EuiPageBody } from '@elastic/eui' ; import { EuiPageContent } from '@elastic/eui' ; import { EuiPageContentBody } from '@elastic/eui' ; import { Route , Switch , Redirect , Router , useLocation } from 'react-router-dom' ; import { createBrowserHistory } from 'history' ; import { EuiText } from '@elastic/eui' ; import { AppMountParameters } from '../../../src/core/public' ; function useQuery ( ) { const { search } = useLocation ( ) ; const params = React . useMemo ( ( ) => new URLSearchParams ( search ) , [ search ] ) ; return params ; } interface HelloPageProps { firstName : string ; lastName : string ; } const HelloPage = ( { firstName , lastName } ) => ( < EuiText > { `Hello ${ firstName } ${ lastName }` } < /EuiText>); export const Routes = ( ) => { const query = useQuery ( ) ; return ( < EuiPageBody > < EuiPageContent > < EuiPageContentBody > < Switch > < Route path = "/hello" > < HelloPage firstName = { query . get ( 'firstName' ) || '' } lastName = { query . get ( 'lastName' ) || '' } / > < /Route> < Redirect from = "/" to = "/hello" / > < /Switch> < /EuiPageContentBody> < /EuiPageContent> < /EuiPageBody>); } ; export const LinksExample = ( props ) => { const history = React . useMemo ( ( ) => createBrowserHistory ( { basename : props . appBasePath , } ) , [ props . appBasePath ] ) ; return ( < Router history = { history } > < Routes /> < /Router>); } ; export const renderApp = ( props , { element } ) => { ReactDOM . render ( < LinksExample { ... props } / > , element ) ; return ( ) => ReactDOM . unmountComponentAtNode ( element ) ; } ;