React-admin 수정,생성 후 원래 페이지로 돌아가기

무엇이 문제인가 ?

React-admin의 < EDIT/> 와 < CREATE/> 는 submit이후 기본리디렉션값으로 "list"를 갖는다.

예를들어 Tags 대한 수정과 생성을 진행하면 Tags List 컴포넌트로 돌아오게된다.

하지만 가령 Posts List에 n개의 Tags 렌더되어있는 컴포넌트를 상상해보자.

아마 Datagrid에 ReferenceManyField를 이용했을것이다. 각각의 Tag를 클릭해 Tag 자체를 수정하고 나면

Tags List로 리디렉션될텐데.. 보통 사용자경험이 원하는것은 다시 Posts List로 돌아가는것이다.

그럴때는 강제로 리디렉션위치를 수정할 수 있는데 두가지 방법이 있다.

해결책

1. 제일 간단한 방법은 simpleForm 의 프로퍼티에 redirect="/posts" 를 추가하는것이다.

  <SimpleForm redirect="/posts">

2. useRedirect 훅을 import하고 < editd > 의 프로퍼티로 onSuccess={redirect("/posts")} 를 추가하는것이다.

import { useRedirect, useNotify } from 'react-admin';

export const TagEdit = (props) => {
	const notify = useNotify();
	const redirect = useRedirect();
	const onSuccess = ({ data }) => {
		notify(`변경사항이 성공적으로 저장되었습니다.`);
		redirect("/tags");
	}
    	return (
    	<Edit onSuccess={onSuccess}   undoable={false} >
		<SimpleForm>
       			....생략
		</SimpleForm>
        </Eidt>
        )
    }

TIP) 리액트 어드민의 EDIT 컴포넌트는 실행취소기능 즉, undoable이 활성화 되어있으면 onSuceess의 useRedirect와 충돌을 일으켜 갱신이 일어나지 않는다. undoable이 dataProvider로부터의 응답을 기다리고 있기때문인것으로 보인다.undoable={false} 로 비활성화한다.

또다른 문제??

하지만 이렇게 하면 문제가 생기는데 Posts List가 아닌 Tags List를 보다가 특정 아이템을 선택해 수정을 할때마저도 수정 후강제로 Posts List로 리디렉션되버린다는 것이다. 역시나 대책없는 사이드이펙트 남발은 앱 사용성을 엉망으로 만든다. 애초에 수정이나 생성을 마치고 나면 방금 전까지 사용자가 보고있던 페이지로 되돌아가게 해야만했던것이다.

심지어 모바일에서는 Posts List로 돌아가는것을 원했다고 해도 리디렉션을 하면 이전페이지의 스크롤 위치가 남아있지 않으므로 최악의 사용자경험을 줄 수 있다. 리디렉션 후 Posts List의 스크롤 포지션은 {x:0,y:0} 즉 첫아이템이 있는 지점으로 돌아가있을것이고 결국 사용자는 변경사항이 제대로 반영되었는지 확인하기 위해 해당 아이템을 찾아 다시 스크롤을 해야만한다. 이런것은 용납될 수 없다.

제대로 된 해결책

useHistory훅을 이용하면 document.history.back()과 같은 메서드를 사용할 수 있다.
useRedirect를 제거하고 useHistory를 이용하면 수정이 끝나고 이전페이지로 되돌아갈 수 있게된다.
document.history.back()에 대응하는 메서드는 history.goBack() 이다.

import { useHistory } from 'react-router-dom';
import { useNotify } from 'react-admin';
...

export const PostEdit = (props) => {
	const notify = useNotify();
	const history = useHistory();
	const onSuccess = ({ data }) => {
    	notify(`변경사항이 성공적으로 저장되었습니다.`);
        //이제 작업이 완료되면 이전 페이지로 되돌아갑니다. 
        history.goBack();
  };
  ....생략

잘못된 부분이 있으면 댓글 주세요. 감사합니다.