TIL) 스파르타 개발일지 23-01-02

프로젝트를 진행하면서 가장 애먹었던 친구들 중 손에 꼽자면!

 

네비바라는 녀석이다... 왜냐 ??

 

로그인, 회원가입 페이지에서 네비바가 보여진 형태로 있었는데...

 

가만 생각해보니 기능을 막을게아니라 애초에 보이면 안됐던거였다.

 

프로젝트가 끝나고서야 하나씩 고쳐지고 있다는... ㅠㅠ

 

그래서 Outlet을 사용하여 없애보았습니다.

 

Outlet이란 녀석은 라우터 6v에서 사용하는 친굽니다.

 

Outlet에 해당되는 컴포넌트jsx는 해당 페이지 상단에서 import를 해줘야합니다.

import { Outlet } from "react-router-dom";

 

그리고 본문(네비바 코드)에서 아울렛을 넣은 Div로 감싸줍니다.

return (
    <div>
      <Outlet />
      .
      .
      .
    </div>
  );
};

export default Navbar;

 

이후 router.js에서 중첩 Router를 통해서 상위컴포넌트(네비바)가 보여질 페이지를 구분해줍니다.

 

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Navbar />}> //네비바가 보여질 페이지들
          <Route path="/home" element={<Home />} />
          <Route path="/shopguide" element={<ShopGuide />} />
          <Route path="/shopguidearticle" element={<ShopGuideArticle />} />
          <Route path="/shopguidearticle/:id" element={<ShopGuideArticle />} />
          <Route path="/shopguideposting" element={<ShopGuidePosting />} />
          <Route
            path="/shopguidedetails/:id"
            component={ShopGuideDetails}
            element={<ShopGuideDetails />}
          />
        </Route> //안보여질 페이지
        <Route path="/" element={<SignIn />} />
        <Route path="/signup" element={<SignUp />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

이렇게 간단해보이지만 과정에는 정말.. 많은 시간이 있었습니다..

 

모든 페이지가 없어지기도하고 ... 아무튼 !! 트러블 슈팅 완료..