[ES6] location.href 이동하는데 history 객체 추가 안되는 방법

ES6(ECMAScript 2015)와 함께 사용하는 window.history 객체를 통해 페이지를 이동할 때, 브라우저의 히스토리에 남기지 않으려면 replaceState 메서드를 사용하면 됩니다. 이 메서드는 현재 히스토리 항목을 대체하여, 새로운 항목을 추가하지 않고 URL을 변경할 수 있습니다.

예제 코드

아래는 JavaScript를 사용하여 페이지를 이동하면서 히스토리에 남기지 않는 코드입니다:

//방법1
window.location.replace('#/mobile/marketWatchTwo');


//방법2
// URL을 변경할 때 history에 남기지 않고 이동하는 코드
const newUrl = '/new-page';

// state: 히스토리에 저장할 데이터 객체, title: 새 페이지의 제목 (대부분의 브라우저에서 무시됨), url: 새 페이지의 URL
window.history.replaceState(null, '', newUrl);

설명

• state: 히스토리에 저장할 데이터 객체. 여기서 null을 사용하면, 특정 데이터를 저장하지 않습니다.
• title: 새 페이지의 제목이지만, 대부분의 브라우저에서 이 매개변수는 무시됩니다. 그래서 빈 문자열을 사용합니다.
• url: 브라우저 주소 표시줄에 표시될 새 페이지의 URL.

이렇게 하면 브라우저의 히스토리에 현재 페이지의 항목이 새로운 URL로 대체되므로, 뒤로 가기 버튼을 눌렀을 때 이전 페이지로 이동하지 않습니다.