history.ts:501 Matched leaf route at location "/login" 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. 오류 수정

이런 오류는 React Router v6에서 발생한다.

라우트가 랜더링 시 해당 라우트에 대한 구성 요소 등이 제공되지 않았을 때 발생한다.

더 쉽게 말하자면, 라우트에 대한 컴포넌트가 정상적으로 제공되었는지 잘 확인해야 한다. 각각의 라우트에는 element 또는 component prop를 사용해서 해당 라우트에 대한 컴포넌트를 지정해야 한다.

필자의 app.js 코드에 element가 잘 지정이 되지 못했던 것을 알았다.

그래서 코드를 이런 식으로 바꿨다.

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import MainPage from './MainPage';
import LoginPage from './LoginPage';
import RegisterPage from './RegisterPage';
import ResultPage from './ResultPage';

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/login" element={<LoginPage />} />
                <Route path="/register" element={<RegisterPage />} />
                <Route path="/upload" element={<ResultPage />} />
                <Route path="/database" element={<div>데이터베이스 페이지</div>} />
                <Route path="/" element={<MainPage />} />
            </Routes>
        </Router>
    );
}

export default App;

이런 식으로 각 element에는 렌더링될 컴포넌트가 지정되어 있어야 한다.