Hello Stackoverflow community
I am trying to make my nested route tab active when first displayed but it does not become active unless clicked. If I change anything the parent route becomes inactive.
App.js
<Route path="account" element={ <Account />} >
<Route index element={ <Profile />} />
<Route path="profile" element={ <Profile />} />
<Route path="key" element={ <Key />} />
</Route>
The reason I have profile as index is because I want that tab to be open as default when user navigates to /account from the left nav.
LeftNav.js
<NavLink to='account' className="nav-link" activeclassname="active">
<span>Account</span>
</NavLink
By default the profile component is loaded which is great but I have another tab inside to switch between profile and key and that is where the profile is not highlighted/active.
Account.js
<div>
<Header title="Account" />
<div>
<NavAccount />
</div>
</div>
Account.js is the page that displays the nested routes swticher for the user.
NavAccount.js
<div>
<div>
<ul className="nav nav-tabs" role="tablist">
<li className="nav-item">
<NavLink to='profile' className="nav-link" id='profileTab' data-bs-toggle="pill" activeclassname="active">
<span>Profile</span>
</NavLink>
</li>
<li className="nav-item">
<NavLink to='key' className="nav-link" id='apiKeyTab' data-bs-toggle="pill" activeclassname="active">
<span>API Key</span>
</NavLink>
</li>
</ul>
</div>
<Outlet />
</div>
As you can see below, the profile tab when first displayed it not active until clicked.
