The `<Outlet/>` from react-router is being rendered in a location outside of its intended wrapper div

Question

The `<Outlet/>` from react-router is being rendered in a location outside of its intended wrapper div

Utilizing MUI for crafting a straightforward dashboard featuring an <AppBar>, a side <Drawer>, my component appears as follows:

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

// along with a wrapper for the 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>
</>

Upon examining the code, it was discovered that the Outlet correctly renders the div but is positioned outside its parent container. Furthermore, unlike its parent (the blue box), it fails to adjust its width dynamically based on the Drawer's state.

Evidently, it seems hidden behind the Drawer (possibly due to a higher z-index). Take a look at the images below for clarification:

Opened view:

Closed view:

The div housing the text "la page profile" represents the Outlet element in this scenario.

The objective is for it to stretch across the entire page width when the drawer is closed and shrink when open. Currently seeking assistance on this matter.

EDIT 1 :

Below is the minimal-reproducible-example:

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

javascript css reactjs material-ui react-router

Answer 1

Answer №1

I have finally cracked the code! The issue was with how I structured my <Routes>. It turns out, the <PrimaryLayout/> component must have nested routes in order for the <Outlet/> to function properly. Additionally, it needs to be mapped to the root route "/".

I made the following changes to the old code:

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

And now, it looks like 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>
</>

Answer 2

I have finally cracked the code! The issue was with how I structured my <Routes>. It turns out, the <PrimaryLayout/> component must have nested routes in order for the <Outlet/> to function properly. Additionally, it needs to be mapped to the root route "/".

I made the following changes to the old code:

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

And now, it looks like 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>
</>

The `<Outlet/>` from react-router is being rendered in a location outside of its intended wrapper div

EDIT 1 :

Answer №1

Similar questions

What is the method for setting autofocus to the first input element within a loop?

Fetching a Wikipedia page using AJAX or the fetch() method

Border becomes dashed when dragging and dropping

What is the best method for transmitting server errors to the client?

Retrieve the page dimensions from a Material UI component `<DataGrid autoPageSize/>`

Newbie in JavaScript seeking help with JSON indexing: What could be causing my script using (for ... in) to fail?

What sets these async method declarations apart?

Reactjs and Express 'To address this particular file type, you might require a suitable loader.'

The button is disabled once inline CSS is applied to it

Get the characters from a URL following a specific character until another specific character

Ways to conceal a div using jQuery when the video source is missing

The Next.js API is experiencing functionality issues on the Netlify platform

The window.load() function seems to be malfunctioning as the event is not being triggered. There are no error

Using jQuery to select elements with specific innerHTML values

Sharing a state object with another React file can be accomplished by using props or context to

Modifying the default value setting in MUI Datepicker

What methods can I use to test a Django view that includes a form?

Exploring the capabilities of searching through a Shopify storefront using GraphQL within a Remix React

Controller encountering JSON null data

Refresh the content of VueJS Resource