2024. 01. 30 Router 설정 중 에러

오늘도 바보같은 실수를 하였으니 만천하에 공개하도록 하겠다.

 

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
    errorElement: <Error />,
  },
  {
    path: "/root",
    element: <Root />,
    children: [
      { path: "/solar", element: <SoLar /> },
      { path: "/Moonbyul", element: <MoonByul /> },
      { path: "/hwasa", element: <HwaSa /> },
      { path: "/wheein", element: <WheEin /> },
    ],
  },
  {
    path: "/detail",
    element: <Detail />,
  },
  {
    path: "*",
    element: <Navigate replace to="/" />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

 

root를 이용해 Home에서 미니 메뉴바를 만들고 그아래에서 화면이 변할 수있도록 해주고 싶었다. 

근데 왠걸 에러나서 보았더니 경로....?

 

ㅋㅋ핳.. 자세히 보니 /root/solar 라는 경로도 되어있었다. (여기도 함정이 있음. 이때는 알지 못했다.)

그래서 childern으로 준 경로에서 /를 제거하였더니 에러가 사라졌다.

 

그랬는데 여기서 함정.

root안에 설정해둔 미니바들이 보이지 않았다.

뭐지? 뭐지? 오래보아야 보인다고 하였나..

    path: "/root",
    element: <Root />,
    children: [
      { path: "/solar", element: <SoLar /> },
      { path: "/Moonbyul", element: <MoonByul /> },
      { path: "/hwasa", element: <HwaSa /> },
      { path: "/wheein", element: <WheEin /> },
    ],

 

root는 따로 root 페이지가 없을텐데ㅋㅋㅋ

root페이지를 찾고 있으니 보일리 만무하다 네이놈

심지어 root는 Home에서 import해서 컴포넌트로 사용하고 있으므로 제거

 

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
    errorElement: <Error />,
    children: [
      { path: "solar", element: <SoLar /> },
      { path: "Moonbyul", element: <MoonByul /> },
      { path: "hwasa", element: <HwaSa /> },
      { path: "wheein", element: <WheEin /> },
    ],
  },
  {
    path: "/detail",
    element: <Detail />,
  },
  {
    path: "*",
    element: <Navigate replace to="/" />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

 

Home 아래에 childern을 주고 root는 제거!!

 

그리고 완성된 기본 틀들.

css는 styled-component를 사용해 휘뚜루 마뚜루 대충 입혀두었다.