[React-Router V6 ] Outlet , createBrowersRouter

 

기존에 Router은 JSX 컴포넌트를 사용해서 라우트 구성을 하였는데 , createBrowersRouter 함수를 이용하면 좀 더 선언적으로 바꿔 줄 수 있다. Object 형식으로 생성이 가능해서 가독성이 훨씬 좋아진다.

 

Before

Router.tsx (Before)

 

createBrowersRouter 이용을 하려면 main.tsx || index.tsx 에서  App 컴포넌트를 렌더링 하는대신 RouterProvider 이라는 것을 render 처리 하고 , router props로 우리가 createBrowersRouter 를 통해 만들어낸걸 전달 해주면 된다.

 

{"originWidth":1488,"originHeight":732,"style":"alignCenter","caption":"index.tsx

 

 

After

Router.tsx

path 가 "/" 일경우 App 컴포넌트를 렌더링 하고 , children 에는 "/"이 부모라고 생각하고 하위에 들어가는 컴포넌트라고 생각 하면된다.

/about  -> <About/>

/home  ->  <Home/> 

errorElement 404 페이지들은 errorElement 키값을 추가하고 렌더링할 컴포넌트를 선언해주며 된다.

 

이제 http://localhost:5173/about 나 home 루트로 들어가보면 , App 하위 컴포넌트들이 렌더링이 안되고, App 컴포넌트만 보일텐데 ,

그 이유는 App 컴포넌트에서 <Outlet/> 이라는것을 선언을 해주지 않아서 그렇다.

Outlet 은 react-router 에서 import 해줘야하며 App 컴포넌트의 하위 컴포넌트를 렌더링 시켜주기 위한 것이라고 생각하면 될거같다.