[react] router로 url은 바뀌지만 component가 갱신 안될때

개발하다보면 참 어이없는 이유로 의도와 다르게 작동될 때가 많다.

이것도 그런 사례 중 하나였다. 쇼핑몰 기본 랜딩페이지에서 상품 클릭시 상품 디테일 페이지로 링크를 걸어놨는데

주소창의 url은 바뀌는데 ui가 안바뀌고 랜더링 자체가 실행이 안되는거 같았다.

 

구글링해보면 스택오버플로우에 hooks를 활용한 해결 방법이있다.

하지만 나의 경우엔 다른 이유였다.

 

 

 

<Switch>
    <Route path="/" component={Auth(Landing, null)}/>
    <Route path="/api/product/:id" component={Auth(Detail,null)}></Route>
    <Route path="/api/product/cart" component={Cart}/>
</Switch>

 

 

 

이런식으로 라우터를 구현했는데, 주소를 입력하면 라우터가 "/"로 인식하여 랜딩페이지의 컴포넌트를 불러왔다.

랜딩페이지의 라우터 부분을 제일 아래로 보내주자 간단히 해결되었다.

 

 

<Switch>
    <Route path="/api/product/:id" component={Auth(Detail,null)}></Route>
    <Route path="/api/product/cart" component={Cart}/>
    <Route path="/" component={Auth(Landing, null)}/>
</Switch>

 

처음에 이렇게 라우터를 구현해뒀는데, 첫번째줄의 "/api/product/:id는 :id 부분에 어떤 값이 들어와도 Detail 페이지로 보내주도록 구현되어있다. 따라서 두번째줄의 cart 라우터를 다른 형태의 주소로 수정했다. 사소한 부분들이지만 라우터를 다루는 것이 익숙하지 않았다.