I have this following route config
export function App() {
return (
<>
<PrimeReactProvider>
<BrowserRouter>
<Routes>
<Route path="/login" element={<LoginPage />}/>
<Route path="/painel" element={<Painel/>}/>
<Route path="dashboard" element={<DashBoard/>}/>
<Route/>
</Routes>
</BrowserRouter>
</PrimeReactProvider>
</>
)
}
Inside the Painel component I have:
export const Painel = ()=>{
return(
<div>
<PainelMenu/>
<Outlet/>
</div>
)
}
The problem is when /painel/dashboard is accessed not content is shown. What I tried:
Switch /painel to /painel/
Switch /painel to /painel/*
Switch path="dashboard" to path="/painel/dashboard" it rendered the component but not the component
Removing browser router
I see no error in my usage following the docs https://reactrouter.com/en/main/components/outlet
Your slash placement is causing this. Instead of:
<Route path="/painel" element={<Painel/>}/>
<Route path="dashboard" element={<DashBoard/>}/>
<Route/>
try this:
<Route path="/painel" element={<Painel/>}>
<Route path="dashboard" element={<DashBoard/>}/>
</Route>