Mencipta Laluan Akar dalam React Router

Laluan utama yang menuju ke halaman utama sering dipanggil laluan akar (root route), kerana laluan lain akan dirender di dalamnya. Adalah sangat sesuai untuk mewakilkannya sebagai komponen berasingan. Oleh itu, mari kita ambil aplikasi kita sekali lagi dan dalam folder src buat satu lagi dan namakan routes. Sekarang dalam folder ini, buat fail root.jsx untuk komponen React berasingan Root. Kod dalam fail akan kelihatan seperti ini:

function Root() {
	return <div>Hello Router!</div>;
}

export default Root;

Dan sekarang mari kita buat pengubahsuaian pada sebahagian kod fail main.jsx, kerana sebagai nilai element kita sekarang akan menghantar komponen Root, dan kandungannya kini berada dalam fail berasingan root.jsx:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
	},
]);

Jangan lupa baris import dengan komponen kita dalam main.jsx:

import Root from './routes/root';

Buka aplikasi yang anda buat dalam tugasan untuk pelajaran lepas. Cipta untuk laluan akar komponen React berasingan Root dalam fail berasingan root.jsx, seperti yang diterangkan dalam pelajaran ini. Buat pengubahsuaian dalam main.jsx anda.