Edit Contact but without loading?

src/app/(sidebar)/contacts/[contactId]/Contact.tsx

@@ -3,6 +3,7 @@
 import { ContactRecord } from "@/app/data";
 import Form from "next/form";
 import { use } from "react";
+import { useRouter } from "next/navigation";
 
 export default function Contact({
   contact
@@ -10,6 +11,7 @@ export default function Contact({
   contact: Promise<ContactRecord>
 }) {
   const c = use(contact);
+  const router = useRouter();
 
   return (
     <div id="contact">
@@ -47,9 +49,12 @@ export default function Contact({
         {c.notes ? <p>{c.notes}</p> : null}
 
         <div>
-          <Form action="edit">
-            <button type="submit">Edit</button>
-          </Form>
+          <button
+            type="button"
+            onClick={() => router.push(`/contacts/${c.id}/edit`)}
+          >
+            Edit
+          </button>
 
           <Form
             action="destroy"