react-router-dom (2) Route 하나에 여러 개의 path 설정

Route 하나에 여러 개의 path를 설정하는 것은 최신 버전의 리액트 라우터 v5부터 적용된 기능.

 

이전 버전에서 여러개의 path에 같은 컴포넌트를 보여주고 싶다면?

const App = () => {
	return(
    	<div>
        	<Route path="/" component={Home} exact={true} />
        	<Route path="/about" component={About} />
        	<Route path="/info" component={About} />
         </div>
     );
 }

 

 

이렇게 Route 컴포넌트를 두 번 사용하는 대신,

path props에 배열을 주면

여러 경로에서 같은 컴포넌트를 보여줄 수 있다.

 

 

const App = () => {
	return(
    	<div>
        	<Route path="/" component={Home} exact={true} />
        	<Route path={['/about', '/info']} component={About} />
         </div>
     );
 }

 

 

 

 

 

 

출처

김민준, 리액트를 다루는 기술 개정판, 2019, 333-334 페이지