2023.11.30 (목) TIL

react-router-dom의 Outlet

중첩 라우팅

중첩 라우팅이란 라우팅 맵핑을 최상위 컴포넌트만이 아니라 여러 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법이다.

<BrowserRouter>
<Layout />
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/detail/:id" element={<Detail />} />
 <BrowserRouter>

• 위 코드와 같이 BrowserRouter 바로아래 페이지와 상관없이 보여주고 싶은 컴포넌트를 위치한다.

home.jsx

login.jsx

페이지 상관없이 보여주고 싶은 컴포넌트가 상단에 고정되어 있다.

그렇다면
1. 특정 페이지에서만 다른 header를 띄우고 싶다면?
2. 특정 페이지 안의 다른 header클릭 하면 내부에서 한번 더 라우팅을 하고 싶다면?

• Test 컴포넌트만 렌더링된 화면은 아래와 같다.
  

• 이렇게 Test로 감싼 Route 안에 각각의 Route가 Children 처럼 작용하는 것을 볼 수가 있다.

과제에서 사용한 방법

Router.jsx

 <Route path="/" element={<Login />}>
 <Route path="/" element={<Layout />}>
          <Route path="/detail/:id" element={<Detail />} />
          <Route path="*" element={<Navigate replace to="/" />} />
          <Route path="/home" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Route>
      </Routes>

Layout.jsx

  <Header/>
      <Outlet />

위와 같이 설정하여 header는 layout에 감싸진 아무 url로 이동시 상위에 고정되어 있게 설정
위의 Route 역시 top-down식으로 렌더링 하여 , /로 url을 요청하면 맨위 상단의 login페이지가 나오게 된다.

사소하지만 확실히 해야 할 실수

thunder client 사용시, ,이거 안붙히면 syntax 오류가 뜸

• VScode 에선 저장시 object안의 마지막 key-value값 뒤에도 쉼표를 찍어주는데, url 요청시 body에도 같은 형식으로 하니 401 클라이언트 오류가 났음
  반드시 디테일 한 것도 짚고 넘어가자