[22.05.10] TIL

react-router

Outlet

v6에서 중첩 라우팅을 사용할 때 Outlet을 이용해 간편하게 해줄 수 있다. Layout으로 최상단에서 관리가 가능하다.

const Layout = () => {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <Outlet />
      </main>
      <Tab />
    </div>
  );
};

const App = () => {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route path='/' element={<SearchPage />} />
        <Route path='favorites' element={<FavoritesPage />} />
      </Route>
    </Routes>
  );
};

NavLink

Link와 다르게 NavLink는 isActive 속성이 있다. 해당 탭에 위치하고 있다는 것을 인식해 스타일을 해줄 수 있다.

useSuspense

데이터를 비롯한 무엇이든 기다릴 수 있도록 해주는 기능. 로딩창을 띄우기 위해 사용한다.
https://ko.reactjs.org/docs/concurrent-mode-suspense.html

function ProfilePage() {
  return (
    <Suspense fallback={<h1>Loading profile...</h1>}>
      <ProfileDetails />
      <Suspense fallback={<h1>Loading posts...</h1>}>
        <ProfileTimeline />
      </Suspense>
    </Suspense>
  );
}