[React] React-router 'Outlet' 사용하여 레이아웃 구성하기

에러 마주하기

로그인 기능을 구현하는 와중 로그인이 성공적으로 되었을 때 특정 루트로 이동하는 코드를 작성하였다.

        <Main>
          <Routes>
            <Route path="/user-management" element={<UserManagement />} />
            <Route path="/child-management" element={<ChildManagement />} />
          </Routes>
        </Main>
        <Routes>
          <Route path="/login" element={<Login />} />
        </Routes>
    

이 코드에서의 문제점은 Routes 가 나누어져 있기 때문에 로그인컴포넌트에서 '/user-management'에 접근하려 하면 접근할 수 없다는 'No routes matched location'에러를 발생시킨다.

하지만 Main 컴포넌트 안에 있는 Routes에 위치 시키자니 레이아웃을 짜고 메뉴에 맞는 컴포넌트를 children props로 넘겼기 때문에 Main 컴포넌트 안에 login component를 위치시킬 수 없었다.

그래서 Main component를 Routes아래에 위치시키자 routes 하위컴포넌트는 route여야 한다는 에러가 발생했다.

해결방법

해결 할 수 있는 방법은 같은 Routes 컴포넌트 하위에 메인컴포넌트와 로그인 컴포넌트를 위치시키고 url에 따라 메인 컴포넌트 안에 있는 자식요소가 바뀌어야 했다.

react router 공식문서를 뒤져보다가 Outlet이라는 컴포넌트를 발견하였고
이번 문제를 해결해주었다.

Outlet은 중첩 라우팅을 통해 상위 컴포넌트를 레이아웃화 할 수 있고 {children}을 사용하는 것과 같은 효과가 난다.

해결

// App.tsx

	  <Routes>
        <Route path="/" element={<Main />}> // 중첩 라우팅
          <Route path="user-management" element={<UserManagement />} />
          <Route path="child-management" element={<ChildManagement />} />
        </Route>
        <Route path="/login" element={<Login />} />
      </Routes>

// Main.tsx

	<MainWrapper>
      <MainMenu />
      <Outlet /> // children과 같은 효과 ! ✨
    </MainWrapper>

참고 : react router v6 - outlet