React Router 왜 계속 Path="/"에 해당되는 컴포넌트만 렌더링될까?

React-Router란?

Package : React-Router-Dom

React-Router는 React에서의 라우팅 기능을 제공한다.

Route요소의 Path속성을 설정하여 각 Path별 컴포넌트를 렌더링 할 수 있다.

a요소의 href로 URL을 설정해도 각 URL별로 렌더링을 할 수 있지만,

Link요소의 to로 URL을 설정한다면 각 URL별로 새로고침없는 렌더링을 제공할 수 있다

 

왜 계속 Path="/"에 해당되는 컴포넌트만 렌더링될까?

다음코드를 보자

 

1번코드

      <Router>
        <Switch>
          <Route path="/">
            <MovieHome />
          </Route>
          <Route path="/movie/:id">
            <Detail />
          </Route>
        </Switch>
      </Router>

위와같은 코드에서

"/"로 접근할때 "/movie/:id"로 접근할 때 모두

MovieHome이 렌더링된다.

 

그렇지만

2번코드

 <Router>
        <Switch>
          <Route path="/movie/:id">
            <Detail />
          </Route>
          <Route path="/">
            <MovieHome />
          </Route>
        </Switch>
      </Router>

위의 코드에서는

 

"/movie/:id"로 접근할때는 <Detail>이 렌더링되고,

"/"로 접근할때는 <MovieHome>이 렌더링된다.

의도에 맞게 작동해주는 것 이다.

 

잠시동안 추측해보자면,

코딩이 작성된 순서에 맞게 동작을 하는것인가 싶다.

 

무슨말이냐하면

"/movie/123"이라는 URL을 호출할때

 

1번코드의 경우

==>  순서에 맞게 "/" path만을 보고 "/movie/123"에 해당된다고 판단하여 MovieHome렌더링

*"/movie/123"에도 "/"가 있으므로, 있다고 판단한게 아닐까 추측

 

2번코드의 경우

==> 순서에 맞게 "/movie/:id" path에 정확히 분기되어 Detail렌더링

 

이처럼 Route의 순서가 라우팅에 영향을 미치는게 맞기때문에

코드를 작성할 시 영향을 주어야할까?

React-Router-dom의 공식문서를 참조해봤다.

(https://v5.reactrouter.com/web/example/basic)

 

아래 하단코드를보면

exact라는 속성이 Route요소에 삽입된것을 볼 수 있다.

 

무슨 의미일까?

정확한 Path와 매치될때만 해당되는것을 의미한다.

 

 

즉, exact가 설정되지않는다면 

정확한 Path경로가 아니더라도, 요청하는 Path에 해당되는 부분이 있으면 렌더링된다.

그렇지만, exact가 설정된다면

정확한 Path경로 일 때만 렌더링된다.

 

문제는 모두 해결되었다.

다시 1번코들로 돌아간 후 수정해보자

<Router>
    <Switch>
      <Route exact path="/">
      	<MovieHome />
      </Route>
      <Route path="/movie/:id">
      	<Detail />
      </Route>
    </Switch>
</Router>

 

정상작동됨을 확인하였다.