React Router V6 | Thư viện React router dom | Định tuyến trong ReactJS
HTML-код
- Опубликовано: 6 фев 2025
- 👉 Xem Lộ Trình Học: fullstack.edu....
👉 Đăng Ký Học Offline Tại F8: short.f8team.d...
Video bài học này chúng ta sẽ cùng tìm hiểu về React Router V6 | Thư viện React router dom | Định tuyến trong ReactJS
React Router V6 (hay react-router-dom v6) là một thư viện tạo bộ định tuyến cho các ứng dụng được viết bởi ReactJS, tại thời điểm mình đăng video này thì React Router V6 là phiên bản mới nhất với nhiều cải tiến đáng kể, nó giúp code được clear hơn về mặt ý nghĩa và cách trình bày khoa học hơn so với bản cũ là react-router-dom v5.
#hoclaptrinh #hoclaptrinhmienphi #javascript #reactjs #frontend #backend #devops #f8
-------
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: s.net.vn/D8kL
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu....
Xây dựng giao diện với HTML, CSS: fullstack.edu....
Xây dựng web responsive: fullstack.edu....
Lập trình Javascript cơ bản: fullstack.edu....
Lập trình Javascript nâng cao: fullstack.edu....
Làm việc với Terminal & Ubuntu: fullstack.edu....
Xây Dựng Website với ReactJS: fullstack.edu....
Xây dựng web với Node & Express: fullstack.edu....
HTML, CSS tips: fullstack.edu....
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu....
Xem thêm tại: fullstack.edu....
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.
Trong một số trường hợp ít gặp thì có thể 1 website có nhiều Routers, ví dụ dự án có 2 thư mục là "home" và "shop", thực chất 2 thư mục này chứa 2 ứng dụng ReactJS nhỏ (đều có file App riêng của nó). Với các paths bình thường thì bạn muốn routing tại "home", tất cả các path bắt đầu bằng "/shop" thì bạn muốn routing tới thư mục "shop".
Các bạn có thể tham khảo ví dụ sau: stackblitz.com/github/remix-run/react-router/tree/main/examples/multi-app?file=home%2FApp.jsx
A ơi, a ra video tiếp đi a ơi, hóng quá a ạ, học ở ngoài chỉ là lý thuyết nên không nắm vững bằng vừa nghe a giảng, vừa đc xem a thực hành :((.
Em mới tự học xong cái này hôm nay luôn thì anh Sơn ra video . 😂
Giữ gìn sức khỏe anh nhé.
a lặn lâu quá. Ngày nào cũng vào hóng video của a :((
Cảm ơn anh em luôn ủng hộ anh nha, anh đang cố gắng mỗi ngày để sớm quay lại làm video được nha em.
@@F8VNOfficial e cho a tung ngay luon a
em hoàn thành 50/50 videos rồi, hic nhiều kiến thức ghê, cảm ơn anh
Hi vọng a làm 1 khoá PHP, ngôn ngữ rất phổ biến với các bạn mới học backend
ok để anh suy nghĩ sau nha
giữ gìn sức khỏe nha anh, anh mà bệnh là nhiều anh em buồn lắm á kkk
chúc a sức khoẻ . Mau khoẻ còn ra nhiều video hơn .
Cảm ơn các bài giảng của anh. Chúc anh sức khỏe!
cảm ơn sếp Sơn rất nhiều, rất mong hóng video tiếp theo của sếp
Chúc anh nhiều sức khỏe ạ. Người chất lượng cao nhưng video chất lượng cũng cao :v
hay quá
Xịn xò, hóng anh lên khúc này nhanh nhanh, em chuyển từ Class Component qua Function Component nên có nhiều cái còn hơi rối
ông học class component có biết cái constructor truyền props với super truyền props vào để làm gì không v ?? tui mới học class component nên hơi rối
@@tian4906 Để trong constructor dùng được this.props đó em
hóng video tiếp theo. còn nhiều phần muốn xem ..... ( chia layout, call api, authenticated with token, ....)
Mong a ra thêm video nữa ạ . a dạy hay và dễ hiểu ạ
a dạy hay quá, em cảm ơn a ạ
Hay quá a ơi h e biết dùng r e cảm ơn a nhé
anh dạy hẳn v6 xịn quá
Anh ơi giữ gìn sức khoẻ nhé!
Mong anh ra thêm các video cơ bản ~~
lâu ghê không thấy anh lên video ạ, mong anh sớm trở lại
bonus thêm 1 vài thông tin từ v6 thì routes đã thay thế vs switch trong v5 ( cơ bản giống nhau ) khi các b đọc code cũ, bla bla v và 1 số tính năng ms của v6 m.n lên đọc thêm trên gu gồ nha
Em cảm ơn anh rất nhiều
Đúng thứ mình đang cần, thanks F8!
Mong anh ra tiếp video ạ
Hèn gì mấy hôm nay không thấy ra video, nhớ giữ sức khoẻ anh nhé!
anh ốm à tội anh ghê giữ gìn sức khoẻ anh nhé
sao ở đâu cũng gặp idol thế này
hay thế
em nghe mọi người nói là nextjs dùng khác reactjs ở phần định tuyến này là khác nhất ạ
extension a Sơn dùng để hiện mấy cái icon cho thư mục là gì thế mn, trông hay hay
Video hay!
Anh ơi giữ sức khỏe nha
cảm ơn anh và anh ơi ra video thêm đi ạ
Anh làm thêm 1 video hướng dẫn xài thằng này đối vs các item trong shop rồi mình thay đổi url nó có hoạt động hình thường k ạ. Em làm thì khi nhập url thì nó k hoạt động
Thấy giọng a hơi khác ! Giữ gìn sức khỏe nha anh !
Cho em hỏi dùng router trong redux như nào vậy anh. Em cảm ơn
a bị ốm à? thấy giọng a hơi khàn. giữ sức khỏe nha a!
Cảm ơn anh.
Anh ơi cho em hỏi là cái navigate("/product",{data})
Làm sao bên route product nhận được obj data truyền qua vậy ạ :
Hóng video mới a :))
Anh và mọi người cho mình hỏi, không biết tại sao dạo này tạo một ứng dụng react hay nextjs sau khi chỉnh sửa code và lưu lại thì nó không compile code dưới terminal và trang không refresh giao diện. Mình đã tìm hiểu nhiều cách, kể cả cài lại nodejs, npm hay là vscode??? Cảm ơn ạ...
Anh Sơn ơi, làm sao để lấy params trên thanh URl trong ClassComponent chứ k phải trong FuntionComponent ạ
A ơi a làm ơn quay tiếp phần reactjs đi ạ
Thank you so much !
A cho e hỏi khi web có nhiều role thì mình định tuyến sao cho role khác không thể vào path mình đã khai báo ạ?. Mong a làm thêm về dự án có chia nhiều role và cách tổ chức folder và chia component luôn ạ.
Em viết ra một middleware, tức là một component nằm giữa Route và Container/Page của em. Trong middleware em check role nhé
a ơi cái private router anh có giảng chưa ah
Anh chưa làm tới em ơi, nhưng cũng khá dễ. Em tạo thêm 1 component nằm trung gian giữa Route và Page, component này có thể gọi là middleware (phần mềm trung gian), trong middleware em check nếu user chưa login thì điều hướng người dùng ra trang Login em nhé
Anh Sơn ơi, khi nào anh ra video mới thế :
Cam on a
em có cái route là /home#banner và /home#about thì giả sử em thêm vào route /home#about/abcd thì làm sao em bắt được case đó mà chuyển sang trang 404 vậy anh ?
Nếu em có 1 Context em muốn truyền dữ liệu bằng cách import và bọc App thì như nào ạ, trong V6 em import thì n ngăn k cho hiện giao diện là sao ạ
a ơi e gặp cái lỗi này khi khai báo route
"You cannot render a inside another . You should never have more than one in your app."
E có vô trang react-route xem làm theo như vậy nhưng vẫn lỗi
1 tháng rồi không có thêm video mới ạ
khoá kết thúc rồi hay sao mà ko thấy ra video nữa v xếp
Ơ sao lâu rồi không có ra video nữa vậy anh?
Mọi người cho em hỏi với, tại giờ em đang đặt backend ở 1 cái domain, frontend ở 1 cái domain đó là làm đúng chưa ạ.Bởi em thấy khi em thử login thì đợi khoảng vài giây nó mới load xong ạ. Em cảm ơn.
V6 có Nested Routes hay lắm ae
Anh format code bằng gì vậy ạ ? Em dùng extension Prettier format khó chịu quá ạ..như tự động chuyển ' ' thành " ", thụ lề ít là có nhiều cái khó chịu lắm
Chỉnh trong json của prettier nhé b.
@@vinhlam8887 mình k biết chỉnh như nào..tham khảo ở đâu b
Cho em hỏi có thể custom trang lỗi theo response code không anh, ví dụ 500 trả về trang Error500.js
Nếu dùng SPA như React thì khi call API gặp lỗi 500 thì em render hoặc điều hướng tới path error-500 là ok. Dùng fectch hoặc axios đều có thể lấy được http response code đó em.
em cài xong cũng import router vào như anh những vẫn báo lỗi =((
7:10 8:58
Như vậy đến đây là hết khóa học ReactJS rồi à anh
Học v5 xong không biết nó lên bữa ngồi ngáo cả buổi vì không thấy anh bạn Switch đâu mất rồi
ông giống tui import switch mà ra toàn báo lỗi đỏ ngồi cả buổi :))
Anh ơi, anh bảo trong khóa này làm dự án tiktok mà không thấy có nhỉ. :)
Sr em, dạo đó xong anh bận quá. Anh đang làm tới phần Tiktok rồi đây, vài videos tới là upload lên RUclips em nhé
Hi Sơn, cho mình hỏi là một trang web thường có phần Header hiển thị ở tất cả các pages. Tuy nhiên giờ mình chỉ muốn cái Header đó hiển thị ở trên trang chủ thôi thì làm thế nào? thanks!
Thì import nó ở page home thôi
thì cắt không cho header làm layout chung nữa , chỉ khi nào cần mới import thôi
cảm ơn a về khoá học ạ, mà còn project tiktok thì sao nhỉ, không biết khoá này a còn ra tiếp video không
khóa này drop r á anh
a Sơn đang ốm à
giọng anh hơi khàn nhỉ, có vẻ anh Sơn bị ốm thì phải.
a ra theem di a
Hình như anh Sơn bị ốm
V6 update
giọng anh nghe như bị cảm vậy
V6 là bản mới đúng ko ae
Mới nhất luôn . Nó loại bỏ Redirect với Switch . Nó dùng kiểu cha con.
@@maekothinh3154 bảo sao nay import switch mãi mà nó k nhận
A nghỉ ngơi sớm đi ạ thấy a giọng hơi khàn
cảm ơn anh nhiều
tks a