react-router <Outlet/> rendered outside of it's wrapper div

userj82v 0
Viewed 56

I'm using MUI to create a simple dashboard with an <AppBar> and a side <Drawer> and my component looks like this :

<>
  <AppBar>
// omitted code
  <AppBar/> 
 
  <Drawer>
// omitted code
  <Drawer/>

// and a wrapper for my Outlet
        <Stack alignItems={'flex-end'} id="router-outlet-wrapper">
            <Toolbar />
            <Box sx={{
                width: `${menuOpen ? `calc( 100% - ${drawerWidth}px )` : '100%'}`,
                height: "100px",
                backgroundColor: 'blue'
            }}>
                Dynamic width div
                <Outlet />
            </Box>
        </Stack>
</>

after inspecting the code i found that the Outlet is rendering my div correctly but it's outside of it's parent container, and unlike it's parent container ( the blue box ) it doesnt dynamically change it's width depending on wether the Drawer is open or not.

It's actually hidden behind the Drawer ( i think it has an elevated z-index ).

Here's and image to clarify what it looks like when opened : enter image description here

vs closed : enter image description here

here, the div containing the text "la page profile" is my Outlet element.

I want it to span the whole page width when the drawer is closed, & shrink when it's open, bit lost here, any help appreciated.

EDIT 1 :

Here's the minimal-reproducible-example :

https://codesandbox.io/s/outlet-error-mre-zqsk55?file=/src/App.js

react-router material-ui reactjs javascript css
1 Answers

I finally found the solution, the problem relates to how my <Routes> are declared, the <PrimaryLayout/> component needs to have nested routes for the <Outlet/> to work, it also has to map to the root route "/" as well.

I changed old code from this :

<>
  <PrimaryLayout/>
  <Routes>
    <Route path='/' element={<h1>root route "/"</h1>} /> {/* self closing */}
    <Route path='/article' element={<Article />} />
    <Route path='/evenement' element={<Evenement />} />
    <Route path='/profile' element={<Profil />} />
    <Route path='/parametresUtilisateur' element={<ParametresUtilisateurs />} />
  </Routes>
</>

To this :

<>
  <Routes>
    <Route path='/' element={<PrimaryLayout />}> {/* not self closing */}
      <Route path='article' element={<Article />} />
      <Route path='evenement' element={<Evenement />} />
      <Route path='profile' element={<Profil />} />
      <Route path='parametresUtilisateur' element={<ParametresUtilisateurs />} />
    </Route>
  </Routes>
</>
userj82v0
Related