Closed
Description
Describe what's incorrect/missing in the documentation
https://reactrouter.com/en/main/components/form#mutation-submissions
<Route
path="/projects/:id"
element={<Project />}
loader={async ({ params }) => {
return fakeLoadProject(params.id);
}}
action={async ({ request, params }) => {
switch (request.method) {
case "put": {
let formData = await request.formData();
let name = formData.get("projectName");
return fakeUpdateProject(name);
}
case "delete": {
return fakeDeleteProject(params.id);
}
default: {
throw new Response("", { status: 405 });
}
}
}}
/>;request.method value is lower case. ex) get, post, delete ...
but
real is upper case ex) GET, POST, DELETE ...
my react-router-dom version is "react-router-dom": "^6.4.1",
export const adminDetailAction = async ({ request, params }) => {
console.log('-> request', request);
console.log('-> request.method', request.method);
console.log('-> request.formData', await Utils.convertFormDataToObject(request));
console.log('-> params', params);
if ((request.method as FormMethod) === 'patch') {
console.log('patch');
}
}; const onDeleteAdminHandler = useCallback(() => {
submit(null, { action: `/management/admin/${params.adminId}`, method: 'delete' });
}, [params.adminId, submit]);
const onPatchAdminHandler = useCallback(() => {
submit(null, { action: `/management/admin/${params.adminId}`, method: 'patch' });
}, [params.adminId, submit]); <Form>
<RowTable rows={tableRows} data={tableData} />
<Stack
direction={'row'}
spacing={2}
sx={{
width: '100%',
justifyContent: 'center',
marginTop: '20px',
}}
>
<Button variant={'contained'} onClick={onDeleteAdminHandler} color={'grey1'}>
삭제
</Button>
<Button variant={'contained'} onClick={onPatchAdminHandler} color={'green'}>
수정
</Button>
</Stack>
</Form>I am not good at English, so please understand.
thank you