การเปลี่ยนเส้นทางไปยังเส้นทางอื่นใน React Router
ตอนนี้ข้อมูลที่ป้อนในแบบฟอร์มเมื่อแก้ไขผลิตภัณฑ์จะถูกบันทึกแล้ว แต่มีข้อแม้หนึ่ง - หลังจากบันทึกข้อมูลแล้ว เรายังคงอยู่บนหน้ารูปแบบฟอร์ม แต่เราต้องกลับไปที่หน้าผลิตภัณฑ์แทน ในเรื่องนี้การเปลี่ยนเส้นทางจะช่วยเราได้ ซึ่งเราจะได้ทำความรู้จักในบทเรียนนี้
มาเปิดไฟล์ edit.jsx
และทำการ import redirect จาก
ไลบรารี่กัน:
import { redirect } from 'react-router-dom';
จากนั้นทำให้ฟังก์ชัน
action ตอนนี้คืนค่า
ไม่ใช่ 1 แล้ว แต่เป็นการเปลี่ยนเส้นทางเรา
ไปยังเส้นทางที่ต้องการ ในกรณีนี้
เราจำเป็นต้องกลับไปที่
หน้าผลิตภัณฑ์:
return redirect(`/products/${params.productId}`);
ตอนนี้ เมื่อกดปุ่มบันทึก เรา จะกลับไปที่หน้าผลิตภัณฑ์ พร้อมข้อมูลที่อัปเดตแล้ว
เราสามารถทำเช่นเดียวกันกับ การเพิ่มผลิตภัณฑ์ใหม่ได้ เพราะ คงจะสะดวกกว่าที่จะออกไปยังฟอร์ม และกรอกข้อมูลทันที มาทำแบบนั้นกัน
เริ่มต้นด้วย ตอนนี้เราจำเป็นต้องเปิด
ไฟล์ root.jsx และ import
redirect เนื่องจากกระบวนการเพิ่ม
ผลิตภัณฑ์เกิดขึ้นที่หน้า root:
import { redirect } from 'react-router-dom';
นำฟังก์ชัน action มาอีกครั้งและ
ตอนนี้จะให้คืนค่าไม่ใช่ product แล้ว
แต่ให้ทำการเปลี่ยนเส้นทางไปที่หน้า
การแก้ไขแทน:
return redirect(`/products/${product.id}/edit`);
มาลองตรวจสอบดู เมื่อคลิกที่ปุ่ม เพิ่มผลิตภัณฑ์ตอนนี้แล้วเราจะเห็นฟอร์มสำหรับ การแก้ไขผลิตภัณฑ์นั้น
นำแอปพลิเคชันที่คุณสร้างไว้ใน แบบฝึกหัดจากบทเรียนที่ผ่านมา ใช้ เนื้อหาจากบทเรียนนี้ นำไปปรับใช้ การเปลี่ยนเส้นทางไปหน้าข้อมูลนักเรียนหลังจาก กดปุ่มบันทึกข้อมูลบนหน้า ฟอร์ม
และตอนนี้ให้ปรับใช้การเปลี่ยนเส้นทางจากหน้า หลักไปยังหน้าแบบฟอร์ม แก้ไขข้อมูลนักเรียนหลังจาก คลิกที่ปุ่มเพิ่มนักเรียน เข้าในรายการ
