Thêm Router vào React Router

Sau khi đã làm quen một chút với các router, chúng ta có thể thêm một cái vào ứng dụng.

Nhưng trước tiên, chúng ta cần dọn dẹp một chút mẫu ứng dụng của mình, mẫu mà chúng ta đã tạo trong các bài học trước. Cụ thể hơn - chúng ta sẽ xử lý thư mục src. Hãy loại bỏ khỏi nó thư mục assets, các tệp App.css, App.jsx. Nói chung, trong đó chỉ còn lại main.jsx và index.css.

Mở index.css và xóa hoàn toàn nội dung của nó. Hãy để nó trống.

Bây giờ hãy xử lý tệp chính của chúng ta main.jsx. Trong đó chúng ta sẽ có mã như thế này:

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

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

	</React.StrictMode>
);

Và bây giờ chúng ta có thể thêm router. Chúng ta sẽ sử dụng BrowserRouter, vì nó được sử dụng thường xuyên nhất trong các ứng dụng web. Đừng quên cả về cú pháp hiện đại. Hãy thêm dòng nhập khẩu:

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

Sau đó, hãy tạo hằng số router và tạo BrowserRouter của chúng ta sau các dòng nhập khẩu. Hãy làm điều này sao cho trên trang chủ của chúng ta hiển thị một div với dòng chữ 'Hello Router!'. Để làm điều này, hãy chỉ định đường dẫn đến trang chủ và phần tử mà chúng ta sẽ hiển thị:

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

Chúng ta cũng cần thêm thành phần RouterProvider và đưa router mà chúng ta đã tạo ở trên vào. Nó nhận tất cả các đối tượng router, kết xuất ứng dụng của chúng ta và kết nối các API khác:

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

Mã đầy đủ sẽ trông như thế này:

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

Hãy lưu các thay đổi. Chúc mừng! Ứng dụng của chúng ta không còn báo lỗi nữa. Bây giờ, nếu chúng ta khởi chạy nó, thì trên trang chủ trong trình duyệt chúng ta sẽ thấy 'Hello Router!'.

Sử dụng tài liệu đã cung cấp, hãy làm sao cho trên trang chủ của ứng dụng của bạn, ứng dụng mà bạn đã tạo trong các bài tập về nhà của các bài học trước, bạn hiển thị một đoạn văn với văn bản 'I'm number one in React!'.