import React from 'react'; import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom'; import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer'; import NavigationBar from '@/components/NavigationBar'; import DashboardContainer from '@/components/dashboard/DashboardContainer'; import AccountApiContainer from '@/components/dashboard/AccountApiContainer'; import { NotFound } from '@/components/elements/ScreenBlock'; import TransitionRouter from '@/TransitionRouter'; import SubNavigation from '@/components/elements/SubNavigation'; export default ({ location }: RouteComponentProps) => ( <> <NavigationBar/> {location.pathname.startsWith('/account') && <SubNavigation> <div> <NavLink to={'/account'} exact>Settings</NavLink> <NavLink to={'/account/api'}>API Credentials</NavLink> </div> </SubNavigation> } <TransitionRouter> <Switch location={location}> <Route path={'/'} component={DashboardContainer} exact/> <Route path={'/account'} component={AccountOverviewContainer} exact/> <Route path={'/account/api'} component={AccountApiContainer} exact/> <Route path={'*'} component={NotFound}/> </Switch> </TransitionRouter> </> );