การเพิ่มเราเตอร์ใน React Router

หลังจากที่เราได้ทำความรู้จักกับเราเตอร์มาบ้างแล้ว เราสามารถเพิ่มมันลงในแอปพลิเคชันของเราได้

แต่ก่อนอื่น เราต้องทำความสะอาดเทมเพลตของแอปพลิเคชันของเราสักหน่อย ที่เราสร้างขึ้นในบทเรียนก่อนหน้านี้ กล่าวคือ เราจะจัดการกับโฟลเดอร์ src ให้นำโฟลเดอร์ assets ออกไป พร้อมกับไฟล์ App.css, App.jsx โดยรวมแล้ว จะเหลือไว้แค่ main.jsx และ index.css

เปิดไฟล์ index.css และลบเนื้อหาทั้งหมดออก ปล่อยให้มันว่างไว้

ตอนนี้มาจัดการกับไฟล์หลักของเรา main.jsx ในนั้นเราจะมี โค้ดดังนี้:

main.jsximport './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>

  </React.StrictMode>
);

และตอนนี้เราก็สามารถเพิ่มเราเตอร์ได้แล้ว เราจะใช้ BrowserRouter เนื่องจากเป็นตัวที่ใช้บ่อยที่สุดใน เว็บแอปพลิเคชัน อย่าลืมเกี่ยวกับ syntax รูปแบบสมัยใหม่ด้วย เราจะเพิ่มบรรทัด import:

main.jsximport {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';

จากนั้น เราจะสร้างตัวแปรคงที่ router และ สร้าง BrowserRouter ของเราหลังจาก บรรทัด import เราจะทำแบบนี้เพื่อให้ บนหน้าแรกของเราแสดงผล div ที่มีข้อความ 'Hello Router!' สำหรับสิ่งนี้ เราจะกำหนด path ไปยังหน้าแรก และ element ที่เราต้องการแสดงผล:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <div>Hello Router!</div>,
  },
]);

เรายังต้องเพิ่ม component RouterProvider และใส่เราเตอร์ ที่เราสร้างไว้ด้านล่างลงไป มันรับ object ทั้งหมดของเราเตอร์ ทำการเรนเดอร์ แอปพลิเคชันของเรา และเชื่อมต่อ API อื่นๆ:

main.jsxReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

โค้ดฉบับเต็มจะมีลักษณะดังนี้:

main.jsximport './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <div>Hello world!</div>,
  },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

บันทึกการเปลี่ยนแปลง ยินดีด้วย! แอปพลิเคชัน ของเราไม่แสดงข้อผิดพลาดอีกแล้ว ตอนนี้ ถ้าเราเรียกใช้งานมัน บน หน้าแรกในเบราว์เซอร์เรา จะเห็นข้อความ 'Hello Router!'