<BrowserRouter>
        <Sidebar></Sidebar>
        <Routes>
          <Route component={Daily}  path="/" exact />
          <Route component={Monthly} path="/monthly"  />
        </Routes>
    </BrowserRouter>

This means it will render an with a null value by default resulting in an "empty" page. 위와 같은 에러가 계속 발생하였다.

해결하기 위해 서치하던중, 같은 문제로 보이는 글을 발견하였고 component를 대신하여 element를 사용하니 해결되었다.

   <BrowserRouter>
        <Sidebar></Sidebar>
        <Routes>
          <Route element={<Daily/>} path="/" exact  />
          <Route element={<Monthly/>} path="/monthly"  />
        </Routes>
   </BrowserRouter>

참고 : https://stackoverflow.com/questions/69854011/matched-leaf-route-at-location-does-not-have-an-element

적용하기에 앞서

SCSS 적용하기

npm install node-sass   또는  yarn add node-sass

명령어를 사용하여 node-sass를 프로젝트에 설치하고, css 파일을 import하듯이 scss파일을 js 페이지에 import 해주면 scss를 사용할 수 있다.

ex )

import { test } from './test.js' <- default로 export 한게 X
import test from './test.js' <- default로 export