import React from 'react' ; import { useRouteMatch , useParams , useLocation , withRouter , Router , } from 'react-router' ; import * as RouterDOM from 'react-router-dom' ; import { NotFound } from 'design/CardError' ; const NoMatch = ( { location } ) => ( < NotFound alignSelf = "baseline" message = { location . pathname } / > ) ; const Switch = props => ( < RouterDOM . Switch > { props . children } < Route component = { NoMatch } / > < /RouterDOM.Switch>); const Route = props => { const { title = '' , ... rest } = props ; const { clusterId } = useParams ( ) ; React . useEffect ( ( ) => { if ( title && clusterId ) { document . title = `${ clusterId } • ${ title }` ; } else if ( title ) { document . title = `${ title }` ; } } , [ title ] ) ; return < RouterDOM . Route { ... rest } / > ; } ; const NavLink = RouterDOM . NavLink ; const Redirect = RouterDOM . Redirect ; export { Router , Route , Switch , NavLink , Redirect , withRouter , useRouteMatch , useParams , useLocation , } ;