리액트 라우팅 도중 생긴 의문점 (해결)

라우터에 관해 배우다가 생긴 의문점

<Route>를 사용할 때, path="/" 가 처음 열리는 페이지인 Home으로 설정해놓았는데, 뭔가 Home은 코드의 맨 윗 줄에다 놓고 싶어서 가장 위에 위치시켰더니 path="/movie" 일 때 열리는 페이지인 Detail가 로드되지 않고, Home이 계속 떠있는 문제가 발생했다.

다시 Home을 포함시킨 <Route>를 아래에다 놓았더니 정상적으로 작동되는 것을 확인할 수 있었다.

왜 이런 것이며 가장 아래에 놓는 것 외에는 해결 방법이 없는 것일까...?

 

########################################################

해결

 

Route는 path의 앞부분 부터 일치하는 부분이 있으면 그대로 적용시킨다.

앞 부분이 참이면 뒷 부분 참이던 거짓이던 넘어가는 논리 연산자인 || (or)과 비슷한 성질이라고 이해하면 편할 것 같다.

 

굳이 위에 Home을 놓고 싶다면, <Route exact path="/"> 이처럼 exact를 사용하면 해당 라우트는 완전일치 판정으로 바뀌어 순서에 상관없이 작동된다. 완전일치 판정으로 바뀐다는 것은 path속성에 넣은 경로값이 url의 경로값과 완전히 일치해야 적용되는 것으로 바뀐다는 말과 같다.