React Router v6 Layout - overlapping components

Question

I am using the following code in the App.tsx:

            <Routes>
                <Route
                    path='/'
                    element={
                        user.username === undefined ? <LandingPage /> : <Dashboard />
                    }
                />
                <Route path='*' element={<NotFound />} />
            </Routes>
            <Footer />

If the path is "/", then Dashboard will be rendered. In the Dashboard component, I am using map to render some components (Place) based on an array. The problem is that the Footer is overlapping the div containing components from the Dashboard. Why is this happening and how I can make the footer to be rendered after all components from the Dashboard component?

The Dashboard component rendering some other components:

            <div className='text-black flex flex-col items-center gap-3'>
                {places.length > 0 &&
                    places.map((place) => <Place {...place} key={uuid()} />)}
            </div>

The Footer component (cyan background) overlapping with a Place component (gray background) https://i.stack.imgur.com/P36da.jpg

React Router v6 Layout - overlapping components

0 Answers0