react-router-dom의 Outlet, Routes, Route

알고 있다시피 React는 Single Page Application 방식의 프레임워크다. react-router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에 렌더링 해주는 라이브러리다.

<Routes> 컴포넌트

여러 Route들을 감싸서 그 중 규칙이 일치하는 Route 하나만을 렌더링 시켜주는 역할

 

<Route> 컴포넌트

path 속성

경로

element 속성

컴포넌트(여러 Route를 매칭하고 싶은 경우 URL 뒤에 * 사용)\

 

예시

const App = () => {
	return (
		<div className='App'>
			<BrowserRouter>
				<Header />
				<Routes>
					<Route path="/" element={<Main />}></Route>
					<Route path="/product/*" element={<Product />}></Route>
					{/* 상단에 위치하는 라우트들의 규칙을 모두 확인, 일치하는 라우트가 없는경우 처리 */}
					<Route path="*" element={<NotFound />}></Route>
				</Routes>
			</BrowserRouter>
		</div>
	);
};

export default App;

 

<Outlet> 태그

Outlet 태그는 중첩 라우팅을 가능하게 해주는 태그다. 기존에는 props로 children을 받아와 구성했다고 하는데, 이제는 Outlet 태그로 모두 연결된다고 한다. 실제 사용 사례가 나오면 추가하도록 하자.