Router

Overview

มองภาพรวมของ React Router v7 แบบ Data mode และเส้นทางการเรียนจาก foundations ไปจนถึง error handling และ route architecture

React Router เข้ามาแก้ปัญหาอะไร

React Router ช่วยทำให้ URL, หน้าจอ และการ navigation ของผู้ใช้เป็นเรื่องเดียวกัน เมื่อ URL เปลี่ยน UI ควรเปลี่ยนตามได้อย่างชัดเจน และเมื่อ UI เปลี่ยนเพราะผู้ใช้กดลิงก์หรือปุ่มนำทาง URL ก็ควรสะท้อนสิ่งนั้นกลับไปด้วย

ผู้ใช้ควร refresh หน้าแล้วกลับมาเห็นบริบทเดิมได้ ไม่ใช่เริ่มใหม่ทุกครั้ง
ผู้ใช้ควร copy URL ไปแชร์ต่อหรือ bookmark ไว้ แล้วกลับมาเปิดได้ใกล้เคียงกับที่เห็นก่อนหน้า
ปุ่ม Back และ Forward ของ browser ต้องพาผู้ใช้ย้อนเส้นทางได้แบบที่คาดหวัง

แผนที่การเรียนของหมวด Router

หมวดนี้จะค่อย ๆ พาเรียนจาก mental model ไปสู่ route tree, nested UI, data flow และการออกแบบ route ที่พร้อมโตต่อ โดยแต่ละช่วงมีหน้าที่ต่างกันชัดเจน

ช่วง	โฟกัส	เมื่อเรียนจบช่วงนี้จะได้อะไร
Foundations	URL, history และ setup พื้นฐาน	รู้ว่า routing คือ URL-driven UI state และรู้จุดเริ่มต้นของ Data mode
Route Tree Basics	route object, path และการ match	อ่าน route tree ออกและเริ่มออกแบบเส้นทางของแอปได้
Nested UI and Navigation	layout, nested routes และ navigation APIs	เข้าใจว่า route tree ไม่ได้กำหนดแค่ URL แต่ยังกำหนดโครง UI ด้วย
Data Loading	loader, route-level reads และ pending state	เห็นว่าการอ่านข้อมูลควรผูกกับ route แทนการ fetch กระจัดกระจายใน component
Mutations and Forms	Form, action, redirect และ feedback หลัง submit	เห็น write flow ของ Data mode แบบครบเส้นทาง
Resilience and Performance	error state, 404, lazy routes และ route growth	ออกแบบ route tree ที่พร้อมใช้งานจริงและดูแลง่ายขึ้น

Mental model ที่ต้องถือไว้ทั้งหมวด

แนวคิดหลักของ React Router track

URL คือ state สาธารณะของแอป

ถ้าสิ่งนั้นควรถูกแชร์, bookmark, refresh แล้วกลับมาได้ มันมักควรสะท้อนอยู่ใน URL ไม่ใช่ซ่อนอยู่แค่ใน local state

Route ไม่ใช่แค่ path เดี่ยว ๆ

URL หนึ่งเส้นทางมักถูกอธิบายเป็น route tree ที่มีความสัมพันธ์ parent-child มากกว่าการแม็ปหน้าแบบแยกขาด

Nested route คือ nested UI

เมื่อ route มีความซ้อนกัน เรามักกำลังแบ่งหน้าที่ของ layout และเนื้อหาย่อยในหน้าจอด้วย ไม่ได้แค่ต่อ string ของ URL

Data mode แยก read กับ write ชัดเจน

หมวดนี้จะค่อย ๆ พาไปเห็นว่า read flow มักอยู่กับ loader ส่วน write flow มักอยู่กับ action แทนการกระจายไว้ตาม event handler

เรียนทีละหน้า ทีละ concept

Overview นี้มีหน้าที่ปูแผนที่ก่อน ยังไม่พยายามสอนทุก API พร้อมกัน เพื่อให้บทถัดไปลงลึกได้แบบไม่ปนกัน

ภาพรวม route flow แบบสั้นที่สุด

โค้ดตัวอย่างนี้ยังไม่ใช่สิ่งที่ต้องจำทั้งหมด แค่ใช้มองภาพรวมว่า route หลายเส้นทางถูกรวมเป็น route tree เดียว แล้ว router instance ถูกส่งเข้า React tree ผ่าน RouterProvider

ตัวอย่างโครง route tree แบบอ่านเอาภาพรวมTS

const router = createBrowserRouter([
  {
    path: "/",
    element: <AppLayout />,
    children: [
      { path: "products", element: <ProductsPage /> },
      { path: "products/:productId", element: <ProductDetailPage /> },
      { path: "settings", element: <SettingsPage /> },
    ],
  },
]);

root.render(<RouterProvider router={router} />);

`createBrowserRouter()` คือจุดเริ่มต้นของ router instance ใน Data mode
route object แต่ละก้อนบอกทั้ง path และความสัมพันธ์กับ route อื่นใน tree
`RouterProvider` คือจุดที่ทำให้ React tree ทั้งก้อนเริ่มตอบสนองต่อ route state

อะไรที่หน้านี้ยังไม่ลงลึก

Overview นี้ตั้งใจให้เห็นแผนที่ก่อนเห็นรายละเอียด

ถ้าคุณยังเขียน route object ไม่คล่องหรือยังไม่รู้ว่า loader, action และ Outlet ใช้อย่างไร ถือว่าเป็นเรื่องปกติ เพราะหัวข้อเหล่านั้นจะถูกสอนแยกในลำดับถัดไป

การติดตั้ง package และ setup จริงจะอยู่ใน Foundations
รายละเอียดของ static routes, index routes, params และ route matching จะอยู่ใน Route Tree Basics
layout routes, Outlet, Link, NavLink และ useNavigate จะอยู่ใน Nested UI and Navigation
loader, useLoaderData และ loading state จะอยู่ใน Data Loading
Form, action, redirect และ feedback หลัง submit จะอยู่ใน Mutations and Forms
error boundaries, 404 และ lazy routes จะอยู่ใน Resilience and Performance

React Router เข้ามาแก้ปัญหาอะไร

ผู้ใช้ควร refresh หน้าแล้วกลับมาเห็นบริบทเดิมได้ ไม่ใช่เริ่มใหม่ทุกครั้ง
ผู้ใช้ควร copy URL ไปแชร์ต่อหรือ bookmark ไว้ แล้วกลับมาเปิดได้ใกล้เคียงกับที่เห็นก่อนหน้า
ปุ่ม Back และ Forward ของ browser ต้องพาผู้ใช้ย้อนเส้นทางได้แบบที่คาดหวัง

แผนที่การเรียนของหมวด Router

ช่วง	โฟกัส	เมื่อเรียนจบช่วงนี้จะได้อะไร
Foundations	URL, history และ setup พื้นฐาน	รู้ว่า routing คือ URL-driven UI state และรู้จุดเริ่มต้นของ Data mode
Route Tree Basics	route object, path และการ match	อ่าน route tree ออกและเริ่มออกแบบเส้นทางของแอปได้
Nested UI and Navigation	layout, nested routes และ navigation APIs	เข้าใจว่า route tree ไม่ได้กำหนดแค่ URL แต่ยังกำหนดโครง UI ด้วย
Data Loading	loader, route-level reads และ pending state	เห็นว่าการอ่านข้อมูลควรผูกกับ route แทนการ fetch กระจัดกระจายใน component
Mutations and Forms	Form, action, redirect และ feedback หลัง submit	เห็น write flow ของ Data mode แบบครบเส้นทาง
Resilience and Performance	error state, 404, lazy routes และ route growth	ออกแบบ route tree ที่พร้อมใช้งานจริงและดูแลง่ายขึ้น

Mental model ที่ต้องถือไว้ทั้งหมวด

แนวคิดหลักของ React Router track

URL คือ state สาธารณะของแอป

Route ไม่ใช่แค่ path เดี่ยว ๆ

Nested route คือ nested UI

Data mode แยก read กับ write ชัดเจน

เรียนทีละหน้า ทีละ concept

ภาพรวม route flow แบบสั้นที่สุด

ตัวอย่างโครง route tree แบบอ่านเอาภาพรวมTS

const router = createBrowserRouter([
  {
    path: "/",
    element: <AppLayout />,
    children: [
      { path: "products", element: <ProductsPage /> },
      { path: "products/:productId", element: <ProductDetailPage /> },
      { path: "settings", element: <SettingsPage /> },
    ],
  },
]);

root.render(<RouterProvider router={router} />);

`createBrowserRouter()` คือจุดเริ่มต้นของ router instance ใน Data mode
route object แต่ละก้อนบอกทั้ง path และความสัมพันธ์กับ route อื่นใน tree
`RouterProvider` คือจุดที่ทำให้ React tree ทั้งก้อนเริ่มตอบสนองต่อ route state

อะไรที่หน้านี้ยังไม่ลงลึก

Overview นี้ตั้งใจให้เห็นแผนที่ก่อนเห็นรายละเอียด

การติดตั้ง package และ setup จริงจะอยู่ใน Foundations
รายละเอียดของ static routes, index routes, params และ route matching จะอยู่ใน Route Tree Basics
layout routes, Outlet, Link, NavLink และ useNavigate จะอยู่ใน Nested UI and Navigation
loader, useLoaderData และ loading state จะอยู่ใน Data Loading
Form, action, redirect และ feedback หลัง submit จะอยู่ใน Mutations and Forms
error boundaries, 404 และ lazy routes จะอยู่ใน Resilience and Performance

React Router เข้ามาแก้ปัญหาอะไร

แผนที่การเรียนของหมวด Router

Mental model ที่ต้องถือไว้ทั้งหมวด

แนวคิดหลักของ React Router track

URL คือ state สาธารณะของแอป

Route ไม่ใช่แค่ path เดี่ยว ๆ

Nested route คือ nested UI

Data mode แยก read กับ write ชัดเจน

เรียนทีละหน้า ทีละ concept

ภาพรวม route flow แบบสั้นที่สุด

อะไรที่หน้านี้ยังไม่ลงลึก

กำลังโหลดบทเรียน...

React Router เข้ามาแก้ปัญหาอะไร

แผนที่การเรียนของหมวด Router

Mental model ที่ต้องถือไว้ทั้งหมวด

แนวคิดหลักของ React Router track

URL คือ state สาธารณะของแอป

Route ไม่ใช่แค่ path เดี่ยว ๆ

Nested route คือ nested UI

Data mode แยก read กับ write ชัดเจน

เรียนทีละหน้า ทีละ concept

ภาพรวม route flow แบบสั้นที่สุด

อะไรที่หน้านี้ยังไม่ลงลึก