Tạo Route Gốc trong React Router

Route chính dẫn đến trang chủ thường được gọi là route gốc (root route), vì các route khác sẽ được render bên trong nó. Rất tiện lợi khi biểu diễn nó dưới dạng một component riêng biệt. Vì vậy, hãy lấy lại ứng dụng của chúng ta và trong thư mục src tạo một thư mục khác và đặt tên là routes. Bây giờ trong thư mục này, hãy tạo tệp root.jsx cho React component riêng biệt Root. Mã trong tệp sẽ trông như thế này:

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

export default Root;

Và bây giờ hãy thực hiện các thay đổi trong đoạn mã của tệp main.jsx, vì đối với giá trị của element chúng ta bây giờ sẽ truyền component Root, và nội dung của nó bây giờ nằm trong tệp riêng biệt root.jsx:

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

Đừng quên dòng import với component của chúng ta trong main.jsx:

import Root from './routes/root';

Hãy mở ứng dụng bạn đã tạo trong các bài tập của các bài học trước. Tạo một React component riêng biệt Root cho route gốc trong một tệp riêng biệt root.jsx, như được mô tả trong bài học này. Thực hiện các thay đổi trong main.jsx của bạn.