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

Đáp án đúng: "Use the <Route> component with nested <Route> components". Trong React Router v6, tuyến lồng nhau được khai báo bằng cách đặt các Route con bên trong một Route cha; path của Route con được nối tiếp vào path của cha, và component của Route cha đặt Outlet ở chỗ muốn hiển thị nội dung của tuyến con đang khớp. "Utilize the <Switch> component to handle nested routes" sai vì Switch là component của React Router v5 và đã bị thay bằng Routes ở v6; hơn nữa Switch chỉ chọn tuyến đầu tiên khớp chứ không tự tạo cấu trúc lồng. "Implement a routing table using an array of route objects" chỉ đúng trong hoàn cảnh khác: v6 cho khai báo mảng đối tượng có thuộc tính children qua useRoutes hoặc createBrowserRouter, nhưng câu hỏi hỏi cách định nghĩa cấu trúc lồng bên trong component cha bằng JSX, và cách được dạy là Route lồng Route. "Direct routes using query parameters in URL path names" sai vì query string (phần sau dấu ?) chỉ mang dữ liệu đọc bằng useSearchParams, không tham gia khớp tuyến nên không tạo được cấu trúc lồng.

Đáp án đúng: "

<Container> <Row> <Col sm={
  12
}
md={
  4
}
>1 of 4</Col> <Col sm={
  12
}
md={
  4
}
>2 of 4</Col> <Col sm={
  12
}
md={
  4
}
>3 of 4</Col> </Row> </Container>

". Grid của React-Bootstrap theo mobile-first: sm={12} nghĩa là từ breakpoint sm (576px) mỗi cột chiếm đủ 12/12 phần nên ba cột xếp chồng dọc, còn md={4} nghĩa là từ md (768px) mỗi cột chiếm 4/12 nên ba cột nằm ngang trên một hàng; dưới 576px, Col không khai báo xs cũng rộng hết hàng. Như vậy ba cột xếp dọc trên màn nhỏ và thành ba cột trên màn vừa trở lên. Phải nói thẳng: phương án chứa "

<Col sm={
  4
}
>1 of 3</Col>

" cũng xếp dọc nếu màn nhỏ được hiểu là dưới 576px, nhưng nó cho ba cột nằm ngang ngay từ mốc sm nên không giữ được bố cục dọc ở màn sm mà câu hỏi nhắm tới. Phương án chứa "<Col>1 of 3</Col> " để Col tự chia đều, ba cột luôn nằm ngang ở mọi kích thước. Phương án chứa "

<Col md={
  12
}
>1 of 4</Col>

" cho mỗi cột rộng đủ hàng ở mọi kích thước nên luôn xếp dọc, kể cả màn lớn. Chữ 1 of 4 bên trong Col chỉ là nội dung hiển thị đánh số lệch, không ảnh hưởng bố cục.