[react-router] Outlet이란

간단하게 부모 라우터 요소에 자식 라우터 요소를 렌더링 할 때 사용하는 것이다.

예전 버전에선 Switch, Route를 사용해 해당 코드에 중첩 사용했는데

 

// Profile.js

...
return ( 
	<div>
		<h1>Hello</h1>
        <Switch>
		<Route path={`/profiles/name`}>
    			<Name />
    		</Route>
 	</Switch>
	</div>
);

이렇게 하면 Hello(부모) 아래에 name(자식)이 중첩 렌더링 됐었다.

 

 

 

 

---

 

 

 

지금 버전에서는 

 

//Router.js

...
	<Route path="/:profile" element={<Profile/>}>  ==  부모 경로
    		<Route path="name" element={<Name />}></Route>  == 자식 경로
   	</Route>

...

// Profile.js

...
return ( 
	<div>
		<h1>Hello</h1>
        	<Outlet />
	</div>
);

Outlet을 사용하면 같은 결과를 얻을 수 있다.

 

좀 더 코드를 알아보기가 쉬워지고 직관적인 느낌이 난다.

 

 

---

 

 

 

더 많은 정보🔥🔥🔥

Outlet v6.14.1 | React Router