에? 이게 대체 무슨 에러지?... 프로젝트의 비밀번호 변경 페이지를 만들던 도중 위와 같은 에러가 발생했다.
const accountRoute: RouteObject = {
path: 'account',
element: <AccountPage />,
loader: loadCurrentStatus,
action: verificationUser,
children: [
{
index: true,
element: <VerificationPage />,
},
{
path: 'reset',
element: <PasswordResetPage />,
loader: checkAuthenticatedToken,
},
],
};분명 경로도 정상적으로 설정해뒀고, 네비게이션 버튼으로 이동할 때는 정상적으로 접근이 되는 것을 확인할 수 있었는데 URL로 PasswordResetPage를 접근할 때에는 에러가 발생하는 것이였다.
무슨 문제인지를 찾아보니 해당 문제는 URL로 접근할 때 상대 경로가 아닌 절대 경로로 접근하는 문제인 것을 확인할 수 있었고, 깃허브 이슈를 통해 해당 문제를 해결할 수 있었다.
간단하게 상대경로라는 것을 index.html에 명시해주면 된다. head tag내부에 baseURL을 추가해주자.
<head>
...
<base href="/" />
</head>
Happy Day 😊❣️ >> bangdori.kr