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: https://i.sstatic.net/a6MRs.png

Closed view: https://i.sstatic.net/ibvLD.png

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

Exploring Nextjs with server-side rendering and fetching data from

Issue with bootstrap accordion not collapsing other open tabs automatically

I am encountering an issue with my function where I aim to prevent the creation of a node using duplicate coordinates

Utilize lazy loading to trigger secondary API calls once all data from the initial API call has been fully loaded in React js

Uncovering the source of glitchy Angular Animations - could it be caused by CSS, code, or ng-directives? Plus, a bonus XKCD comic for some light-hearted humor

What are the steps to ensure the equalizer start button functions properly?

Express.js Res redirection problem occurring with Backbone.js due to failure in redirecting hashtag URLs

Managing reverted MySQL transactions in a Node.js environment

Issue with calling function from props in React is not being resolved

Shortcuts for $scope variables in AngularJS templates

Exploring the integration of Jest/Enzyme for testing React components while maintaining JSS style encapsulation

What is the best way to transfer an API response from Express to React in a request?

Rearrange the li elements within multiple ul lists using JavaScript

Load Jquery hover images before the users' interactions

The callback in Jquery getJSON does not execute even when a valid JSON response is received

Is it possible to maintain the maximum height and width of a div across all levels of zoom?

Querying through a database containing 1 million <string Name, int score> pairs efficiently within sub-linear time

Loading JavaScript variable with pre-processed JavaScript information

Color Swap Hover Animation

What could be the reason for the 'if' statement not being assessed in the 'then' promise of the ajax request?