Câu hỏi: FER202 Phát triển web Front-End với React – Bộ ôn tập cuối kỳ số 4

Đáp án đúng: "<Link to="/about">About</Link> ". Component Link của react-router-dom hiển thị thành thẻ a nhưng chặn hành vi tải trang mặc định và đổi URL qua History API, để React Router chỉ render route khớp mà không tải lại toàn bộ trang, giữ nguyên state của ứng dụng; thuộc tính to chỉ đường dẫn đích. "<a href="/about">About</a> " sai vì thẻ a thường vẫn đến được trang nhưng trình duyệt tải lại toàn bộ ứng dụng từ máy chủ, mất state và mất lợi ích của điều hướng phía client. "<Route to="/about">About</Route> " sai vì Route dùng để khai báo tuyến đường với path và element, không có thuộc tính to và không tạo liên kết bấm được. "<Navigate to="/about">About</Navigate> " sai vì Navigate chuyển hướng ngay khi được render, dùng cho trường hợp như chưa đăng nhập, nó không hiển thị chữ About thành liên kết cho người dùng bấm.

Đáp án đúng: "

<Route path="/user/:userId/post/:postId" component={
  UserPost
}
/>

". Trong React Router, mỗi đoạn đường dẫn bắt đầu bằng dấu hai chấm là một tham số động (URL parameter); mẫu này khớp URL như /user/7/post/42 và cho userId là 7, postId là 42, đọc ra bằng useParams (hoặc match.params ở bản cũ). Prop component là cú pháp React Router v5, ở v6 viết bằng prop element, nhưng cách khai báo tham số giống hệt. "

<Route path="/user/userId/post/postId" component={
  UserPost
}
/>

" thiếu dấu hai chấm nên userId và postId chỉ là chữ cố định, chỉ khớp đúng chuỗi đó. "

<Route path="/user/:userId/:postId" component={
  UserPost
}
/>

" cũng hợp lệ về cơ chế vì vẫn khai báo đúng hai tham số, chỉ bỏ đoạn post nên URL thành /user/7/42; đáp án chọn mẫu có đoạn post vì đường dẫn lồng tài nguyên như vậy rõ nghĩa hơn. "

<Route path="/user?userId/post?postId" component={
  UserPost
}
/>

" sai vì dấu chấm hỏi trong URL mở đầu query string, không khai báo tham số đường dẫn.

Đáp án đúng: "<Suspense fallback={ <Loading /> }> <MyComponent /> </Suspense>". Suspense nhận đúng một prop tên fallback chứa phần tử hiển thị trong lúc một component con, như component tạo bằng lazy, đang tải; component cần chờ phải nằm BÊN TRONG Suspense dưới dạng con. "<Suspense loading={ <Loading /> }> <MyComponent /> </Suspense>" sai tên prop: Suspense không có prop loading nên không hiện giao diện chờ nào. "<Suspense wait={ <Loading /> }> <MyComponent /> </Suspense>" cũng sai tên prop, wait không tồn tại trên Suspense. "<Suspense fallback={ <Loading /> } loading={ <MyComponent /> } />" có fallback đúng nhưng nhét MyComponent vào một prop lạ thay vì làm con; Suspense tự đóng không có con nên MyComponent không bao giờ được render.

Đáp án đúng: "<Route path="/users/:id" element={ <User /> } />". Trong React Router v6, một đoạn đường dẫn bắt đầu bằng dấu hai chấm là tham số động (dynamic segment): đường dẫn /users/123 khớp với mẫu này và giá trị 123 được gán cho tham số id; bên trong component User, ta lấy nó bằng hook useParams, nhận object có id là chuỗi "123". "<Route path="/users?id" element={ <User /> } />" sai vì phần sau dấu hỏi là query string, React Router không dùng nó để so khớp đường dẫn, nên mẫu này không bắt được /users/123. "<Route path="/users/{id}" element={ <User /> } />" sai vì cặp ngoặc nhọn là cú pháp tham số của framework khác như ASP.NET, còn React Router coi đây là chữ thường cần khớp nguyên văn. "<Route path="/users/#id" element={ <User /> } />" sai vì dấu thăng mở đầu phần hash của URL, không phải ký hiệu tham số trong path.

Đáp án đúng: "function Greeting({ isAdmin }) {

return ( <> <h1>Welcome!</h1> {
  isAdmin && <p>You have administrative privileges.</p>
}

</> ); }". Trong JSX, cặp ngoặc nhọn mở chế độ biểu thức JavaScript; biểu thức isAdmin && thẻ p trả về thẻ p khi isAdmin là true, còn khi isAdmin là false nó trả về false và React không hiển thị gì, nên lời chào luôn hiện còn dòng thông báo quyền chỉ hiện với quản trị viên. Lưu ý nếu vế trái là số 0 thì React sẽ in ra số 0, nên vế trái nên là boolean. Phương án viết "</h1> isAdmin && <p> " thiếu ngoặc nhọn, nên chữ isAdmin && trở thành văn bản thường hiện thẳng ra màn hình, còn thẻ p luôn được render bất kể isAdmin. Cách viết "{isAdmin ? <p> " xuất hiện ở hai phương án có nội dung giống hệt nhau và đều sai cú pháp: toán tử ba ngôi bắt buộc có nhánh sau dấu hai chấm, thiếu nó trình biên dịch báo lỗi; muốn dùng ba ngôi thì phải thêm nhánh null, còn câu hỏi yêu cầu dùng toán tử &&.