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

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

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

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

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

import './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:

import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

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

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

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

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

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

import './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!'

โดยใช้เนื้อหาที่นำเสนอ จงทำให้บนหน้าแรก ของแอปพลิเคชันของคุณ ซึ่งคุณสร้างขึ้น ในการบ้านของบทเรียนที่ผ่านมา แสดงผล paragraph พร้อมข้อความ 'I'm number one in React!'