리액트 페이지 이동 취소 관련하여 문의드립니다

안녕하세요. 최근에 제가 이 비슷한 기능을 만든 경험이 있어 답변을 드려봅니다. 이전 페이지로 이동 및 새로고침 부분 외에 다른 메뉴 호출 방지가 목표라고 하셨는데 제가 생각하는 방안으로는 1. disabled 처리하기 1) 글 작성 페이지로 이동할 때, 글 작성 중임을 알 수 있는 쿼리스트링의 값이 필요합니다. ex) /write?is=ok 2) 해당 값을 setState 처리합니다. ex) const [searchParams, setSearchParams] = useSearchParams(); const [writeState, setWriteState] = useState<any>(); setWrtieState(searchParams.get('is')); 3) 다른 메뉴를 호출하는 컴포넌트 className에 삼항연산자 처리하기 - css에 두 가지 class명을 만든다. 하나는 disabled 처리가 된 class명이어야 한다. ex) className={`menu ${writeState === "ok" ? "disabled" : ""}`} 이렇게 하면 애초에 다른 메뉴가 호출되는 버튼이 disabled 상태가 되어 문제가 없지 않을까 싶습니다. 또는 1-2 disabled로 처리하지만 쿼리스트링 대신 sessionStorage를 사용하기 방법도 있을 거 같습니다. 글 작성 페이지에 접속하는 버튼을 클릭했을 때, sessionstorage를 set 해주고 글 작성 페이지에 들어갈 때, get해줍니다. 나머지 방법은 동일하게 하고요!!

안녕하세요! React에서 페이지를 라우팅하기 위해서 Link 컴포넌트를 사용하셨을텐데요. 결론부터 말씀드리면, Link 컴포넌트의 onClick 속성에 원하는 로직을 넣으시면 해결이 될 것 같아요. 왜냐하면 Link 컴포넌트의 동작은 ”Link 컴포넌트 클릭 -> onClick에 정의한 이벤트 핸들러 실행 -> 페이지 이동“ 순서로 진행되기 때문이에요. onClick={(event) => { // 여기에 원하는 로직 넣기 }} onClick은 위와 같이 정의하시구, 로직상에서 event.preventDefault()를 호출하시면 Link 컴포넌트의 기본 이벤트(페이지가 이동된다)를 막으실 수 있을거에요. 이제 질문자님께서 이미 앞서 처리하셨던 로직을 함께 조합하시면 완성이 될 것 같네요!

react router에서 useBlocker에 대해 찾아보세요. v6을 쓰고 있다면 마이너 버전을 신경써야할 수도 있습니다.

안녕하세요. 일반적으로 입력을 받는 페이지나 에디터가 있는 페이지는 뒤로가기나 다른 페이지 이동을 컨트롤할때 window.onbeforeunload 를 사용해서 컨트롤합니다 ㅎㅎ 리액트에서 페이지 진입했을때 addEventListener로 설정하시면 될 것 같습니다.

리액트에서 페이지 이동을 막는 방법으로는 두 가지가 있습니다. 1. ' beforeunload ' 이벤트 사용하기 이 방법은 ' window '객체의 ' beforeunload ' 이벤트를 사용하는 것입니다. 이 이벤트는 페이지가 unload 되기 직전에 발생하며, 사용자가 페이지를 벗어나기 전에 컨펌창을 띄우는 등의 처리를 할 수 있습니다. 위 코드에서는 useEffect 훅으로 beforeunload 이벤트 리스너를 추가하고, 컴포넌트가 언마운트 될 때 이벤트 리스너를 제거합니다. 2. ' react-router-dom '의 ' Prompt ' 컴포넌트 사용하기 ' react-router-dom ' 패키지에서 제공하는 ' Prompt ' 컴포넌트를 사용하는 것도 방법 중 하나입니다. 이 컴포넌트는 사용자가 페이지를 벗어날 때 컨펌창을 띄워줄 수 있습니다. 위 코드에서는 ' Prompt ' 컴포넌트를 사용하여 ' isDirty ' 상태가 ' true '일 때 컨펌창을 띄우고, 폼이 변경될 때와 제출될 때 상태를 갱신합니다. ' Prompt ' 컴포넌트에 전달하는 ' message ' prop으로 컨펌창에 표시할 메시지를 설정할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, { useState } from 'react';
import { Prompt } from 'react-router-dom';

const YourComponent = () => {
  const [isDirty, setIsDirty] = useState(false);

  const handleFormChange = () => {
    setIsDirty(true);
  };

  const handleFormSubmit = () => {
    setIsDirty(false);
  };

  return (
    <>
      <Prompt
        when={isDirty}
        message="Are you sure you want to leave without saving?"
      />
      <form onChange={handleFormChange} onSubmit={handleFormSubmit}>
        {/* form inputs */}
      </form>
    </>
  );
};

export default YourComponent;