Route template

import { ModifyTodoPage } from '~/containers/todo/modify-todo-page';
import { modifyTodoAction } from '~/controllers/todo/modify-todo.action';
import { todoByIdLoader } from '~/controllers/todo/todo-by-id.loader';

// Loader
export const loader = todoByIdLoader;
// Action
export const action = modifyTodoAction;

export default function Index() {
  // containers 
  return <ModifyTodoPage />;
}

// Error boundary - required
export { ErrorBoundary } from '~/libs/components/error-boundary';

• Lưu ý trong môt route sẽ không xử lý bất kỳ một UI, loader, action
• Chú ý: Mỗi route đều phải có

export { ErrorBoundary } from '~/libs/components/error-boundary';

• Riêng đối với các route delete sẽ sử dụng

export { ErrorBoundary } from '~/libs/components/error-boundary/error-boundary-delete-modal';

Filename: routes/app.todos.$id.delete.tsx

import { DeleteTodoPage } from '~/containers/todo/delete-todo-page';
import { deleteTodoAction } from '~/controllers/todo/delete-todo.action';
import { todoByIdLoader } from '~/controllers/todo/todo-by-id.loader';

export const loader = todoByIdLoader;
export const action = deleteTodoAction;

export default function Index() {
  return <DeleteTodoPage />;
}

export { ErrorBoundary } from '~/libs/components/error-boundary/error-boundary-delete-modal';