[에러] 빈 화면에 console창에 Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

문제점 : 

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

 

문제 코드 : 

<HashRouter>

        <Routes>

          <Route path="/" component={Home}>

             {/* <h1>Home</h1>  */}

          </Route>

         

          <Route path="/about" component={About}>

          {/* <h1>About</h1>  */}

          </Route>

        </Routes>

      </HashRouter>

 

 

해결방법 

1. component를 element로 수정한다.

2. {컴포넌트명}을 {<컴포넌트명/>}으로 수정한다. 

 

 

코드는 아래와 같다. 

<HashRouter>

        <Routes>

          <Route path="/" element={<Home/>}>

             

          </Route>

         

          <Route path="/about" element={<About/>}>

         

          </Route>

        </Routes>

      </HashRouter>