Search code examples
reactjsreact-router-dom

React RouterDom doesnt work on outlet and subroutes


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


Solution

  • 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>