[Angular] routerLink vs href

 

⚠️ Problem

Angular/typescript로 개발한 웹 페이지를 카톡 인앱브라우저에서 띄웠을 때, 뒤로가기가 작동하지 않는다는 이슈를 받았다.

메인 화면에서 항목 선택 후 상세 페이지로 넘어갔을 때, 왼쪽 화면처럼 인앱브라우저 뒤로가기 버튼이 활성화되어야 하는데, 

실제로 개발된 페이지에는 뒤로가기 버튼이 활성화되어있지 않았다. 

 

(왼쪽: 정상화면)                         (오른쪽: 문제화면)

 

코드는 아래와 같다.

<li *ngFor="let content of contents">
   <a class="link-service" [routerLink]="['service']" [queryParams]="{'type':'All'}" fragment="group{{content.id}}">
     {{content.name}}
   </a>
</li>      

 

Angular 가이드 페이지에서 routing에 대해 공부할 때 routerLink 라는 속성을 배웠고, 이를 자연스럽게 적용했는데 왜 뒤로가기가 되지 않는 걸까? 그래서 routerLink 대신 일반적으로 많이 썼던 href로 바꿔봤더니 뒤로가기 버튼이 활성화되어 정상 화면처럼 작동했다.

<li *ngFor="let content of contents">
   <a class="link-service" href="service?type=All#group{{content.id}}">
     {{content.name}}
   </a>
</li>      

음?? routerLink랑 href는 같은 기능을 하는게 아니었나??  바로 구글링 시작..

 

 

 

✅ 구글에 routerlink vs href 라고 치면 가장 먼저 나오는 설명은 아래와 같다.

 

Using href directly tells the browser to open the link as a new, such that the app will be reloaded and still linked to the exact page that it has been configured for. 

 

href는 브라우저를 새로운 링크로 여는 것을 뜻한다. 그래서 앱은 reload되고 구성된 정확한 페이지에 연결된다.

 

RouterLink navigates the app without reloading using the internal api.

 

라우터 링크는 내부 api를 사용해서 reload하지 않고 앱에서 페이지를 이동한다. 즉, 라우터 컨텐츠만 렌더링하고 싶을 때 사용한다.

 

아래 데모 링크를 클릭해보면, href로 연결된 버튼을 클릭하면 페이지가 reload 되는 것을 볼 수 있다. 

demo page : https://stackblitz.com/edit/angular-hsezw8?embed=1&file=src/app/app.component.html

angular-hsezw8 - StackBlitz

 

 

참고 사이트

https://angular.io/guide/router

Angular