# Single Page Application - SPA trong ReactJS (Tạo một ứng dụng với một trang duy nhất) ## 1. Giới thiệu **Single Page Application (SPA)** là ứng dụng web mà không cần phải tải lại trang khi người dùng thực hiện các thao tác trên trang web. SPA tạo ra các route giả mà không cần phải tải lại trang, các state của trang sẽ được lưu lại và không bị mất khi chuyển hướng giữa các trang. SPA giúp tăng trải nghiệm người dùng. ## 2. Cài gói `react-router-dom` để sử dụng Single Page Application trong ReactJS Cài đặt gói `react-router-dom` để sử dụng router trong ứng dụng React. ```bash npm install react-router-dom ``` ## 3. Sử dụng `react-router-dom` `react-router-dom` cho phép chúng ta sử dụng với 2 cách như sau: - `BrowserRouter`: Sử dụng để bọc các route trong ứng dụng React. (ở trong các phiên bản v5) - `createBrowserRouter`: Sử dụng để tạo ra 1 router trong ứng dụng React. (mới phát triển ở trong các phiên bản v6) Chúng ta sẽ lần lượt tìm hiểu cách sử dụng `BrowserRouter` và `createBrowserRouter` trong ứng dụng React. ### 3.1. Sử dụng `BrowserRouter` (cách sử dụng cũ) Tạo file `App.jsx` và các component cho các trang trong thư mục `src/pages`. Tại `App.jsx`, sử dụng `BrowserRouter`, `Routes` và `Route` để quản lý các route trong ứng dụng React. - `BrowserRouter`: Sử dụng để bọc các route trong ứng dụng React. - `Routes`: Sử dụng để quản lý các route. - `Route`: Sử dụng để tạo ra các route trong ứng dụng React, cung cấp các props như: - `path`: Đường dẫn của route. - `element`: Component sẽ được render ra khi đường dẫn trùng với `path`. - `index`: Với route cha, chỉ định route con nào sẽ được hiển thị mặc định đầu tiên. > Ta có thể lồng các component `Route` vào nhau để tạo ra các route con. ```jsx import { BrowserRouter, Routes, Route } from 'react-router-dom'; // Import các component ... const App = () => { return ( // Sử dụng BrowserRouter để bọc các route trong ứng dụng React {/* Khai báo các route đến cho các Component */} }> {/* Trang chính mặc định khi truy cập */} }> {/* Route cha /app */} }> {/* Mặc định hiển thị trang app/cities */} } > {/* Route con app/cities */} {/* Tạo param cho route, trước đó phải thêm Link đến params này */} }> {/* Route con app/cities/:id với id là param */} } > {/* Route con app/countries */} }> {/* Route con app/form */} }> {/* Route đến trang pricing */} }> {/* Route đến trang product */} }> {/* Route đến trang login */} }> {/* Tất cả Route không khớp ở trên sẽ đi vào đây */} ); }; ``` Tại các component, sử dụng `Link` và `NavLink` để chuyển hướng giữa các trang. Sử dụng thay thế cho thẻ `a` trong HTML. Vì khi sử dụng thẻ `a`, trang sẽ bị tải lại. Còn `Link` và `NavLink` giúp chuyển hướng giữa các trang mà không cần phải tải lại trang. `NavLink` sẽ thêm class `active` vào thẻ `a` (lúc render ra) khi đang ở trang đó. Còn `Link` sẽ không thêm bất cứ thứ gì. Mỗi cái đều có lợi ích riêng. ```jsx import { Link, NavLink } from 'react-router-dom'; const Header = () => { return (

); }; ``` #### 3.1.1. Lồng các Route vào trong 1 Route và tạo chỉ mục (index) cho Route VD: Ta có link `/about` và `/about/team`, `/about/personal`. Ta muốn `/about` là trang chính, `/about/team` và `/about/personal` là các trang con của `/about`. Với `index` của Route `/about`, khi truy cập `/about` sẽ hiển thị mặc định trang được chỉ định trong `index`. Tại `App.jsx`, ta sẽ lồng các Route vào trong 1 Route và tạo chỉ mục (index) cho Route `/about`. Khi lồng các Route vào trong 1 Route, đồng nghĩa với việc lồng các component vào nhau. Khi đó sử dụng `` để hiển thị các Route con trong Route cha. Cách sử dụng `` tương tự như `{props.children}` trong React. > Ví dụ về cách sử dụng `index` và lồng các Route vào trong 1 Route: ```jsx import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; import Team from './pages/Team'; import Personal from './pages/Personal'; import NotFound from './pages/NotFound'; const App = () => { return ( } /> }> } /> {/* Chỉ mục (index) cho Route /about */} } /> } /> } /> ); }; ``` > Ví dụ về cách sử dụng `Outlet` để hiển thị các Route con trong Route cha: ```jsx import { Outlet } from 'react-router-dom'; const About = () => { return (

About

{/* Hiển thị các Route con trong Route cha */}

); }; ``` #### 3.1.2. Lưu ý khi sử dụng `BrowserRouter` Khi đặt các path cho đường dẫn, tốt nhất không nên ghi `/` Chỉ được phép ghi `/` khi muốn đường dẫn đó là path gốc. Được phép khai báo `/rootpath` nhưng sau đó chỉ được ghi `childpath`, như vậy nó mới hiểu `childpath` là đường dẫn phía sau của `rootpath` > VD ``` jsx Root

}> Child

}/> ``` ``` txt localhost:3000/rootpath/childpath ``` #### 3.1.3. Sử dụng useNavigate để chuyển hướng trang `useNavigate` giúp chuyển hướng trang mà không cần phải sử dụng thẻ `Link` hoặc `NavLink`. Dùng `useNavigate` để chuyển hướng trang khi cần chuyển hướng trang sau khi thực hiện xong 1 hành động nào đó. Có thể quay lại trang trước đó bằng cách sử dụng `navigate(-1)`, hoặc chuyển hướng đến trang tiếp theo bằng cách sử dụng `navigate(1)`. Sử dụng `replace` để thay thế trang hiện tại bằng trang mới, không lưu trạng thái của trang hiện tại. ```jsx import { useNavigate } from 'react-router-dom'; const Home = () => { const navigate = useNavigate(); return (

Home

{/* Chuyển hướng đến trang about */} {/* Quay lại trang trước đó */} {/* Chuyển hướng đến trang tiếp theo */} {/* Chuyển hướng đến trang about và thay thế trang hiện tại trong ngăn xếp */}

); }; ``` #### 3.1.4. Sử dụng component để chuyển hướng trang trong 1 hành động nào đó `Navigate` giúp chuyển hướng trang mà không cần phải sử dụng thẻ `Link` hoặc `NavLink`. Dùng `Navigate` để chuyển hướng trang khi cần chuyển hướng trang sau khi thực hiện xong 1 hành động nào đó. Có thể quay lại trang trước đó bằng cách sử dụng ``, hoặc chuyển hướng đến trang tiếp theo bằng cách sử dụng ``. `Navigate` và `useNavigate` giống nhau, chỉ khác nhau ở cách sử dụng. `Navigate` sử dụng như 1 component ở trong JSX, còn `useNavigate` sử dụng như 1 hook ở trong đoạn code Javascript. ```jsx import { Navigate } from 'react-router-dom'; const Home = () => { return (

Home

{/* Chuyển hướng đến trang about */} {/* Quay lại trang trước đó */}

); }; ``` ### 3.2. Sử dụng `createBrowserRouter` (cách sử dụng mới thay cho BrowserRouter) #### 3.2.1. Giới thiệu về `createBrowserRouter` Ta nên dùng `createBrowserRouter` thay cho `BrowserRouter` vì `createBrowserRouter` có thể truyền API Data (Data Loading, Fetching) từ React, trong khi BrowserRouter không thể làm việc với API Data từ form submit, button click, ... Sau đây là ví dụ cách sử dụng `createBrowserRouter`: - Tạo một `router` bằng cách sử dụng `createBrowserRouter` truyền vào là một mảng chứa object các route. + `path`: Đường dẫn của route. + `element`: Component sẽ được render ra khi đường dẫn trùng với `path`. + `children`: Các route con của route cha. + `loader`: Hàm để fetch data từ API. + `action`: Hàm xử lý sự kiện submit form. + `errorElement`: Component sẽ được render ra khi có lỗi. - Sử dụng `RouterProvider` component để truyền `router` vào ứng dụng React. > Ví dụ về cách sử dụng `createBrowserRouter`: ```jsx import { createBrowserRouter, RouterProvider } from 'react-router-dom'; const router = createBrowserRouter([ { path: '/', element: }, { path: '/about', element: } ]) function App() { return // Thay BrowserRouter bằng RouterProvider và truyền router vào RouterProvider } ``` #### 3.2.2 Lồng các Route với nhau 1. Sử dụng thuộc tính `children` của `createBrowserRouter` để lồng các Route với nhau, `children` cũng sẽ là một mảng chứa các object các route con giống như `createBrowserRouter`. >App.js ```jsx import import { createBrowserRouter, RouterProvider } from 'react-router-dom'; const router = createBrowserRouter([ { path: '/home', element: , children: [ { path: '/about', // path sẽ là home/about element: }, { path: '/contact', // path sẽ là home/contact element: } ] } ]) function App() { return } ``` 2. Sau đó sử dụng `` để hiển thị các Route con từ các Route cha >Home.js ```jsx import { Outlet } from 'react-router-dom'; function Home() { return (

Home

) } ``` #### 3.2.3. Sử dụng `loader` để fetching data vào react-router-dom 1. Khởi tọa 1 function để fetch data từ API. >fetchUser.js ```js function fetchUser() { return fetch('https://api.example.com/user').then(res => res.json()); } ``` 2. Sử dụng `loader` để fetch data từ API vào react-router-dom >App.js ```jsx import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import fetchUser from './fetchUser'; const router = createBrowserRouter([ { path: '/', element: , loader: fetchUser // Sử dụng loader để fetch data từ API và trả về data cho component này // hàm fetchUser sẽ nhận tự động nhận object chứa các properties từ route ({params}), nếu route có params thì fetchUser sẽ nhận params } ]) ``` 3. Sử dụng `useLoaderData` để lấy data từ API trong component >Home.js ```jsx import { useLoaderData } from 'react-router-dom'; function Home() { const user = useLoaderData(); return (

Home

{user.name}

) } ``` #### 3.2.4. Sử dụng `useNavigation` để kiểm tra trạng thái web đã chuyển trang chưa (!Không phải `useNavigate`) Các trạng thái của useNavigate: - `useNavigation().state = 'loading'`: Đang chuyển trang - `useNavigation().state = 'idle'`: Đã chuyển trang xong - `useNavigation().state = 'submitting'`: Đang submit form từ `action` của `createBrowserRouter` > Như vậy, có thể sử dụng `useNavigation().state` để kiểm tra trạng thái web đã chuyển trang xong chưa, nếu chưa thì hiển thị loading, nếu rồi thì hiển thị nội dung (phù hợp với việc fetching data từ API) >Home.js ```jsx import { useNavigation } from 'react-router-dom'; function Home() { const navigation = useNavigation(); if (navigation.state === 'loading') { return

} return (

Home

) } ``` #### 3.2.5. Sử dụng `useRouteError` để kiểm tra lỗi khi chuyển trang Sử dụng `useRouteError` để kiểm tra lỗi khi chuyển trang, nếu có lỗi thì hiển thị thông báo lỗi 1. Đầu tiên tạo 1 component `Error` để hiển thị thông báo lỗi >Error.js ```jsx import { useRouteError } from 'react-router-dom'; function Error() { const error = useRouteError(); if (error) { return

Error: {error.data || error.message}

// error.data là lỗi từ react-router-dom (chuyển trang, ko có trang), error.message là lỗi từ API (fetching data) } } ``` 2. Trong `App.js` sử dụng thuộc tính `errorElement` để hiển thị component khi có lỗi >App.js ```jsx import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import Error from './Error'; const router = createBrowserRouter([ { path: '/', element: , errorElement: } ]) ``` #### 3.2.6. Sử dụng Form trong react-router-dom Form trong react-router-dom sẽ không cần phải sử dụng `e.preventDefault()` để ngăn chặn sự kiện mặc định của form Chỉ có `createBrowserRouter` mới có thể sử dụng `form` trong `react-router-dom`, không thể sử dụng form trong `BrowserRouter` `Form` trong `react-router-dom` sẽ chỉ hoạt động với method `POST`, `PUT`, `DELETE`, `PATCH`, không hoạt động với method `GET` Sử dụng `form` trong `react-router-dom` để submit thì trong `createBrowserRouter` sẽ có 1 thuộc tính là `action` để xử lý sự kiện submit của form, `action` sẽ trả về cho function 1 object {request}. Nhiệm vụ của function là xử lý dữ liệu từ form và trả về kết quả >function.js ```js async function submitForm({request}) { const formData = await request.formData(); const data = Object.fromEntries(formData); // Xử lý dữ liệu từ form ..... } ``` >App.js ```jsx import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import submitForm from './submitForm'; const router = createBrowserRouter([ { path: '/', element: , action: submitForm } ]) ``` > Ngoài ra, trong `react-router-dom` còn có module `useActionData` để trả về kết quả từ `action` của `createBrowserRouter` > Home.js ```jsx import { useActionData } from 'react-router-dom'; function Home() { const data = useActionData(); return (

Home

{data.message}

) } ``` #### 3.2.7. Sử dụng useFetcher trong react-router-dom Mục đích của `useFetcher` là để fetch data, update data từ API trong react-router-dom, mà không cần phải chuyển trang. Ví dụ trong trang "/menu" có 1 API để lấy data, sang trang khác thay vì request lại API thì có thể sử dụng `useFetcher` để lấy data từ tranh "/menu" sang trang khác Để thực hiện điều đó, ta phải dùng `createBrowserRouter` và trong thẻ element của component đó có chứa trang của Menu với thuộc tính là `loader` để fetch data từ API >Menu.js ```jsx import { useState, useEffect } from 'react'; export default function Menu() { .... } export async function menuLoader() { const menu = await getMenu(); return menu; } // Tạo hàm menuLoader để fetch data từ API, sau đó trả về menu ``` >App.js ```jsx import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import Menu, { menuLoader } from './Menu'; const router = createBrowserRouter([ { path: '/menu', element: , loader: menuLoader } ]) ``` Sau đó, sử dụng `useFetcher` để lấy data từ API, ví dụ với trang `Order.js` >Order.js ```jsx import { useFetcher } from 'react-router-dom'; export default function Order() { const fetcher = useFetcher(); useEffect(() => { fetcher.load("/menu"); }, []) const menu = fetcher.data; return (

Order

{menu.name}

// Sử dụng fetcher.Form để submit form (cập nhật lại data) ) } ``` > Trong fetcher định nghĩa bởi useFetcher, có các thuộc tính là `fetcher.load(URL)` để lấy data API từ trang nào đó, sau đó sẽ lưu vào `fetcher.data`, `fetcher.Form` để submit form, `fetcher.state` để kiểm tra trạng thái của fetcher (loading, idle, submitting) ## 4. Tìm hiểu về StateURL trong react-router-dom (Lưu trạng thái của ứng dụng trong URL) ### 4.1. Giới thiệu Trong một số trường hợp, chúng ta cần lưu trữ trạng thái của ứng dụng trong URL, để có thể chia sẻ trạng thái của ứng dụng với người dùng khác, hoặc để có thể lưu trữ lại trạng thái của ứng dụng để sử dụng sau này. ### 4.2. Lợi ích Dễ dàng chia sẻ trạng thái của ứng dụng với người dùng khác, nó là global state và có thể truy cập từ bất kỳ từ các component nào. Một cách tốt để có thể có thể truyền trạng thái của ứng dụng giữa các trang, hoặc từ 1 trang đến 1 trang khác. Làm cho việc đánh dấu trạng thái và chia sẻ trạng thái của các UI tại đúng thời điểm trở nên chính xác hơn. ### 4.3. VD về cách sử dụng StateURL Ta có 1 url khi nhấp vào 1 UI như sau: `http://localhost:3000/location/vietnam?city=Hanoi&district=HaiBaTrung` Ta có thể thấy `params` ở đây là `vietnam`, `query` là `city=Hanoi&district=HaiBaTrung` Từ đây có thể lấy được các giá trị của `params` và `query` từ UI trước đó, và có thể sử dụng nó để thực hiện xử lý trong UI hiện tại. ### 4.4. Cách tạo params và đọc params từ URL Để tạo 1 `params` nation cho url, ta sử dụng `:nation` như sau `http://localhost:3000/location/:nation` Tạo 1 Route với path sau: ```javascript } /> } /> ``` Trước đó tạo 1 `Link` hoặc `NavLink` từ component `Location` để chuyển hướng đến `nation`: ```javascript Vietnam ``` Để đọc `params` từ URL, ta sử dụng `useParams` ở trong component `Nation` sau khi đã tạo `params` như trên: ```javascript import { useParams } from 'react-router-dom'; const Nation = () => { const { nation } = useParams(); // lấy params từ URL, {nation: 'vietnam'} return (

{nation}

); }; ``` ### 4.5. Cách tạo query và đọc, sửa query từ URL Để tạo 1 `query` city và district cho url, ta sử dụng `?city=Hanoi&district=HaiBaTrung` như sau `http://localhost:3000/location/vietnam?city=Hanoi&district=HaiBaTrung` Tương tự như trên, đến bước tạo `Link` hoặc `NavLink` từ component `Location` để chuyển hướng đến path có params `nation`, ta thêm `query` là dấu `?` và `&` nếu có nhiều `query`: ```javascript Hanoi ``` Để đọc `query` từ URL, ta sử dụng `useSearchParams` ở trong component `Nation` sau khi đã tạo `query` như trên: ```javascript import { useSearchParams } from 'react-router-dom'; const Nation = () => { const [searchParams, setSearchParams] = useSearchParams(); // lấy query từ URL, {city: 'Hanoi', district: 'HaiBaTrung'} return (

{searchParams.get('city')}

{searchParams.get('district')}

); }; ``` Để sửa `query` từ URL, ta sử dụng `setSearchParams` ở trong component `Nation` sau khi đã tạo `query` như trên: ```javascript ```

ReactJS: Single Page Application