Cài đặt React Router trong ứng dụng Redux

Trong các bài học trước, chúng ta đã cài đặt các công cụ chính để làm việc với Redux. Thường xảy ra trường hợp ứng dụng cần một bộ định tuyến để điều hướng giữa các trang web của nó và ứng dụng của chúng ta sẽ không phải là ngoại lệ. Để làm điều này, chúng ta sẽ cài đặt thư viện React Router.

Hãy mở dự án của chúng ta và nhập vào terminal lệnh sau:

npm install react-router-dom

Nói trước một chút, tôi sẽ nói rằng ứng dụng Redux của chúng ta theo truyền thống tập trung vào các sản phẩm, thông tin về chúng được đăng bởi một số người bán. Vì vậy bây giờ chúng ta sẽ sửa đổi một chút thành phần chính App, và thêm vào ứng dụng chức năng để thực hiện định tuyến.

Để bắt đầu, hãy vào thư mục src, sau đó vào app và tạo ở đây tệp root.jsx. Đây sẽ là gốc của trang web chúng ta: bên trái sẽ có menu, còn bên phải - nội dung (hiện tại chúng ta chỉ có tiêu đề ở đây):

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>Sản phẩm</a>
					<a>Người bán</a>
				</nav>
			</div>
			<div id="main_page">
				<h2>Đây là ứng dụng Redux đầu tiên của tôi!</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

Và thành phần App chúng ta sẽ sửa đổi. Đầu tiên, hãy xóa toàn bộ nội dung của nó. Sau đó nhập khẩu hai hàm cho router và thành phần gốc Root của chúng ta:

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

Bên dưới phần nhập khẩu, hãy tạo router, và viết tuyến đường đầu tiên, truyền cho nó Root của chúng ta làm phần tử hiển thị và, tương ứng, đặt đường dẫn thành '/'. Sau này trong App chúng ta sẽ thêm các tuyến đường cần thiết khác:

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

Bên dưới, hãy viết mã cho hàm App:

function App() {
	return <RouterProvider router={router} />
}

export default App

Xong. Khởi chạy thôi. Trong phần tiếp theo, chúng ta sẽ thực hiện các thành phần để làm việc với ứng dụng Redux.

Cuối cùng, hãy thêm một chút đẹp mắt, bằng cách viết kiểu cho nó trong index.css:

body {
	font-size: 24px;
	line-height: 1.5;
}

nav {
	display: flex;
	flex-direction: column;
}

ul {
	list-style: none;
	padding: 0;
}

h1, h2, h3 {
	margin: 0;
}

a {
	text-decoration: none;
	color: blue;
	cursor: pointer;
}

#main {
	display: flex;
	margin: 20px;
}

#menu {
	margin-right: 50px;
	padding-top: 50px;
	padding-right: 50px;
	border-right: 2px solid lightgray;
	font-weight: bold;
}

Hãy thêm React Router vào ứng dụng của bạn.

Hãy để ứng dụng của bạn liên quan đến sinh viên, thông tin về họ sẽ được đăng bởi giảng viên. Với điều này, hãy tạo thành phần gốc Root. Sửa đổi thành phần App như mô tả trong bài học.