Как убрать лишний div в root React?

Question

[Павел]

Всем привет.
Я вообще не фронтендер, React изучаю буквально несколько дней и столкнулся с такой проблемой.
Мне надо реализовать стандартную разметку для html страницы (wrapper, а в нем content и footer, чтобы последний прижимался к низу страницы).
Сначала мне мешал <div id='root'></div>, но из информации в доках и др. источниках узнал, что убирать его нельзя, так как это может вызвать проблемы с рендерингом элементов.
Тогда я создал базовый компонент `Layout`, его код ниже:

import Navbar from './Navbar'
import Footer from './Footer'
import Sidebar from './Sidebar';
import CustomCursor from './CustomCursor'
import React from 'react';


function Layout({ children }) {
  return (
    <>
      <div className='content flex-[1_0_auto]'>
        <CustomCursor/>
        <Navbar/>
        <Sidebar/>
        { children }
      </div>
      <Footer/>
    </>
  );
}

export default Layout

А root div просто стилизовал под wrapper.
Но не тут-то было.
Теперь в этом <div id='root'></div> появляется еще один div. Откуда? Он мешает нормально стилизовать страницу, и footer из-за этого не прикрепляется к низу.

Comments

[Hovo_Varosyan]

А где лишний div?