React Router에서 경로 제거하기

저장소에서 데이터를 삭제하는 함수는 작성했습니다. 이제 제품 페이지 레이아웃에 제품 삭제 버튼을 위한 코드를 추가해 보겠습니다. 편집 버튼 바로 뒤에 추가할 것입니다. 두 버튼 폼을 모두 div #control로 감싸겠습니다. 그런 다음 action에 값 'delete'을 기록합니다. 또한 사용자가 제품을 정말 삭제할지 다시 한 번 확인할 수 있도록 대화 상자를 추가하겠습니다:

routes/product.jsx<div id="control">
  <Form action="edit">
    <button type="submit">편집</button>
  </Form>
  <Form
    method="post"
    action="delete"
    onSubmit={(event) => {
      if (!confirm('이 제품을 삭제하시겠습니까?')) {
        event.preventDefault();
      }
    }}
  >
    <button type="submit">삭제</button>
  </Form>
</div>

CSS 파일에도 스타일을 추가하겠습니다:

index.cssdiv#control {
  display: flex;
}

button {
  margin-right: 5px;
}

이제 제품 삭제를 위한 새로운 경로를 생성하겠습니다. 이를 위해 routes 폴더를 열고 그 안에 delete.jsx 파일을 생성하세요. redirect와 삭제 함수 deleteProduct를 바로 가져오겠습니다:

routes/delete.jsximport { redirect } from 'react-router-dom';
import { deleteProduct } from '../forStorage';

그런 다음, 당연히 id를 기준으로 deleteProduct를 호출하고, 삭제 후 메인 페이지로 리디렉션하는 action 함수를 작성합니다:

routes/delete.jsxexport async function action({ params }) {
  await deleteProduct(params.productId);
  return redirect('/');
}

이제 main.jsx를 열기만 하면 됩니다. action을 가져옵니다:

main.jsximport { action as deleteAction } from './routes/delete';

그리고 삭제 경로의 action 메서드 값으로 설정합니다. 경로 객체 자체는 children 배열의 끝에 추가하겠습니다:

main.jsx{
  path: 'products/:productId/delete',
  action: deleteAction,
},

이제 어떤 제품을 클릭하고 삭제 버튼을 사용하여 삭제할 수 있습니다. 개발자 도구의 localforage를 확인하여 이를 확인할 수 있습니다.