[React]중첩라우팅-Outlet

설치

npm install react-router-dom

Outlet

<Outlet/>은 중첩 Route를 사용해야할때 자식 Route element의 위치를 나타낼때 사용된다.

//App.tsx

function App() {
  return (
    <>
    <Routes>
      <Route path='/' element={<Header/>}>
        <Route path='/' element={<Main/>}></Route>
        <Route path='/issue' element={<Issuelist/>}></Route>
      </Route>
      <Route path='*' element={<Errorpage/>}></Route>
    </Routes>
    </>
  );
}

중첩 라우팅을 하려고하는데 Header가 기본에 자식으로 main,issuelist를 가진다.

이때

export default function Header() {
  return (
    <>
    <div>Header</div>
    </>
  )
}

부모 Route에 그냥 헤더코드만 작성하게되면 자식 element를 찾지 못해 화면에 안나온다.

해결방법

export default function Header() {
  return (
    <>
    <div>Header</div>
    <Outlet />
    </>
  )
}

부모 element에서 컴포넌트를 사용해 위치를 지정해준다

결론

은 라우팅에서 자식컴포넌트의 위치를 지정해줄때 사용한다