React Router에서 다른 경로로 리다이렉트하기

이제 제품 수정 시 폼에 입력된 데이터는 저장되지만, 한 가지 문제가 있습니다. 데이터 저장 후에도 여전히 폼 페이지에 남아있는데, 우리는 제품 페이지로 돌아가야 합니다. 이번 강의에서 소개할 리다이렉트가 이를 도와줄 것입니다.

edit.jsx 파일을 열고 라이브러리에서 redirect를 가져옵니다:

import { redirect } from 'react-router-dom';

그런 다음, action 함수가 이제 1을 반환하는 대신 필요한 경로로 우리를 리다이렉트하도록 만듭니다. 이 경우, 우리는 제품 페이지로 돌아가야 합니다:

return redirect(`/products/${params.productId}`);

이제 저장 버튼을 클릭하면 업데이트된 데이터를 가진 제품 페이지로 돌아갑니다.

새 제품 추가에도 동일한 작업을 할 수 있습니다. 폼 페이지로 바로 이동하여 채우는 것이 더 편리할 것입니다. 그렇게 해봅시다.

먼저, 이제 root.jsx 파일을 열고 redirect를 가져와야 합니다. 제품 추가는 루트 페이지에서 이루어지기 때문입니다:

import { redirect } from 'react-router-dom';

다시 action 함수를 가져와서 이번에는 product를 반환하는 대신 수정 페이지로 리다이렉트합니다:

return redirect(`/products/${product.id}/edit`);

이것도 확인해봅시다. 이제 제품 추가 버튼을 클릭하면 수정 폼이 나타납니다.

이전 강의의 과제에서 만든 애플리케이션을 가져오세요. 강의 자료를 사용하여, 폼 페이지에서 저장 버튼 클릭 후 학생 페이지로 리다이렉트를 구현하세요.

이제 메인 페이지에서 학생 추가 버튼을 클릭한 후 학생 데이터 수정 폼 페이지로 리다이렉트를 구현하세요.