[React] Matched leaf route at location "/" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

이렇게 입력 했는데 오류남 

벨로퍼트님 책엔 Route element안써있고 다 component였는데 눈치껏 바꾸긴했었음 

//App.js

function App() {
  return (
    <>
      <Routes>
        <Route component={PostListPage} path={['/@:username', '/']} exact />

        <Route element={<LoginPage />} path="/login" />
        <Route element={<RegisterPage />} path="/register" />
        <Route element={<WritePage />} path="/write" />
        <Route element={<PostPage />} path="/@:username/:postId" />
      </Routes>
    </>
  );

 

 

Route안에 component 쓰는건 사라져서 위처럼 쓰면 안 됨 

그리고 path={['/@:username','/']}이 잘 안되었다는 블로그 글발견하고 아래와 같이 수정 

 

function App() {
  return (
    <>
      <Routes>
        <Route element={<PostListPage />} path="/" exact />
        <Route element={<PostListPage />} path="/@:username" exact />

        <Route element={<LoginPage />} path="/login" />
        <Route element={<RegisterPage />} path="/register" />
        <Route element={<WritePage />} path="/write" />
        <Route element={<PostPage />} path="/@:username/:postId" />
      </Routes>
    </>
  );

오류없이 말끔해진 콘솔창...ㅎㅎ...ㅠㅠㅠ