I have a component called Dashboard that renders when the path matches "/".
I want <Dashboard /> to have nested routes for the left-hand side of the page handled by a nested <Routes> inside. The first component in the <Routes\> in Dashboard loads fine, but the issue happens when I attempt to render the second component for "/view-two".
I'm pretty sure this is because "/view-two" won't match the parent Route "/" and therefore <Dashboard /> isn't even being loaded. When I do "*" as the path, it starts to work but my 404 route breaks and doesn't match anymore or has lower priority when visiting a route that shouldn't exist (like "/fake-page").
Does anyone have a way to accomplish this, or is the only way to put <Dashboard /> in its own path such as "/home"?
Thanks in advance for any advice.
App.tsx
<Routes>
<Route path={"*"} element={<PageNotFound />} />
//PrivateOutlet is just a wrapper to check if the user is authenticated
<Route element={<PrivateOutlet />}>
<Route index element={<DashboardPage />} />
</Route />
</Routes>
DashboardPage.tsx
const DashboardPage = () => {
const path = useLocation();
console.log(`checking dashboard page`, path.pathname);
return (
<Routes>
<Route path="/" element={<p>View One</p>} />
<Route path="/view-two" element={<p>View Two</p>} />
</Routes>
);
};