Menambah Penghala ke dalam React Router

Setelah sedikit mengenali penghala, kita boleh menambah satu daripadanya ke dalam aplikasi.

Tetapi pertama, kita perlu membersihkan sedikit templat aplikasi kita, yang kami buat dalam pelajaran lepas. Lebih khusus - kami akan uruskan folder src. Buang daripadanya folder assets, fail App.css, App.jsx. Secara umum, anda akan tinggal hanya main.jsx dan index.css di dalamnya.

Buka index.css dan kosongkannya sepenuhnya. Biarkan ia kosong.

Sekarang mari kita uruskan fail utama kami main.jsx. Di dalamnya kami akan mempunyai kod seperti ini:

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

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

	</React.StrictMode>
);

Dan sekarang kita boleh menambah penghala. Kami akan menggunakan BrowserRouter, kerana ia paling kerap digunakan dalam aplikasi web. Jangan lupa tentang sintaks moden. Mari tambah baris import:

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

Kemudian, mari buat pemalar router dan cipta BrowserRouter kami selepas baris dengan import. Mari lakukan ini supaya pada halaman utama kami memaparkan div dengan tulisan 'Hello Router!'. Untuk ini, tentukan laluan ke halaman utama dan elemen yang akan kami paparkan:

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

Kami juga perlu menambah komponen RouterProvider dan masukkan penghala yang kami buat di atas. Ia menerima kesemua objek penghala, memaparkan aplikasi kami dan menyambungkan API lain:

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

Kod penuh akan kelihatan seperti ini:

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>
);

Mari simpan perubahan. Tahniah! Aplikasi kami dengan anda tidak lagi memberi ralat. Sekarang, jika kami menjalakannya, maka pada halaman utama dalam pelayar kami akan nampak 'Hello Router!'.

Menggunakan bahan yang diberikan, buat supaya pada halaman utama aplikasi anda, yang anda buat dalam tugasan rumah untuk pelajaran lepas, anda memaparkan perenggan dengan teks 'I'm number one in React!'.