React Router nested routes question

I have a parent component, <Admin />, which renders a directory of users <DirectoryList/> and a <Profile /> component.

When the user clicks a user in the directory, their profile is rendered to the right of the directory by passing the id to the Profile component.

In the Profile component, I’ve attempted to place 3 tabs (nested routes) to display user data in each. However, when you click a tab, it no longer displays the <DirectoryList /> or the <Profile /> components. Just a blank component.

How can I keep everything intact and the data (in this example, just a <p>test</p>) is rendered inside the same <Profile /> component, just with a different route?

Any advice would be appreciated! There’s something simple I’m missing.. Do I need to pass the Route props? Currently, when you click a profile, it’s not linked up and just renders the right profile without the id in the route — is this recommended to do as standard practice?

const TabsInProfile = () => { const tabs = [ { name: ‘Profile’, href: ‘/home/admin’, current: true, }, { name: ‘Analysis’, href: ‘/home/admin/analysis’, current: false, }, { name: ‘Reports’, href: ‘/home/admin/reports’, current: false, }, ]; return ( <> <div className=’mt-6 sm:mt-2 2xl:mt-5′> <div className=’border-b border-gray-200′> <div className=’max-w-5xl mx-auto px-4 sm:px-6 lg:px-8′> <nav className=’-mb-px flex space-x-8′ aria-label=’Tabs’> {tabs.map((tab) => ( <Link key={tab.name} to={tab.href} className={classNames( tab.current ? ‘border-pink-500 text-gray-900’ : ‘border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300’, ‘whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm’ )} aria-current={tab.current ? ‘page’ : undefined} > {tab.name} </Link> ))} </nav> </div> </div> </div> </> ); }; export default TabsInProfile;

Rendered inside profile.js

<TabsInProfile /> <Switch> <Route path=’/home/admin’ exact render={() => { return <p>test</p> />; }} /> <Route path=’/home/admin/analysis’ exact render={() => { return <p>test 2</p>; }} /> <Route path=’/home/admin/reports’ exact render={() => { return <p>test 3</p>; }} /> </Switch>