import React from 'react' ; import TabNav from '../TabNav' ; import { NavLink , Switch , Route , withRouter , RouteComponentProps } from 'react-router-dom' ; class ExampleBase extends React . Component < RouteComponentProps > { render ( ) { return ( < div > < TabNav > < NavLink exact = { true } to = { `${ this . props . match . url }/` } activeClassName = "active" > NavLink A < /NavLink> < NavLink to = { `${ this . props . match . url }/page-b` } activeClassName = "active" > NavLink B < /NavLink> < /TabNav> < div style = { { padding : '30px' } } > < Switch > < Route exact = { true } path = { `${ this . props . match . url }/` } render = { ( props ) => < div > Content A < /div>}/ > < Route exact = { true } path = { `${ this . props . match . url }/page-b` } render = { ( props ) => < div > Content B < /div>}/ > < /Switch> < /div> < /div>); } } const TabNavReactRouterExample = withRouter ( ExampleBase ) ; export default TabNavReactRouterExample ;