React Router 6

This playlist is part of The Frontend Developer Career Path

React Router 6

87 lessons6 hours 30 min

1. Introduction to React Router 6

2. Multi-page vs single-page apps

3. React Router Setup & BrowserRouter

5. BrowserRouter & Routes challenge

6. Route, path, & element

7. Quick Re-org

9. VanLife project bootstrapping

10. Initial Deploy to Netlify

11. Mirage JS Server

12. Challenge: Vans Page - Part 1

13. Challenge: Vans Page - Part 2

14. Route Params - part 1

15. Route Params - part 2

16. A11y Update - wrapping complex content in a link

17. Route Params part 3.1 - useParams() & challenge

18. Route Params part 3.2 - useParams() challenge

19. Route Params Quiz

20. Nested Routes Intro

21. Fixing the Navbar with a Layout Route

22. Fixing the Navbar with a Layout Route part 2

23. Bootstrap the Host pages

24. Nesting the /host routes

25. Creating the Host Layout

26. Relative Paths

27. Index Routes

28. To nest or not to nest?

29. Nested Routes Quiz

32. Active Link Styling with NavLink

33. Active Link Styling with NavLink - part 2

34. Adding Host Vans Routes

35. 🔀 Optional Side Quest - Building out the Host Vans List and Detail Pages

36. Building out the Host Van Detail page

37. Relative Links

38. Back to all vans

39. Add /host/vans/:id Nested Routes

40. Add the Final Navbar!

41. Outlet Context

42. Search Params Intro

43. useSearchParams

44. Challenge: Set up search params in VanLife

45. Filter the array w/ the search param

46. Challenge: Filter the vans in VanLife

47. Using Links to add search params

48. Challenge: Filter the vans with Links

49. Using the search params setter function

50. Challenge: Filter the vans with a setter function

51. Caveats to setting params

52. Merging search params with Links

53. Merging search params with the setSearchParams function

54. Challenge: Conditional rendering practice

55. Fix remaining absolute paths

56. Back to all vans

58. useLocation

59. Challenge: conditionally render the back button text

61. "Happy Path" vs. "Sad Path" (new)

62. Quick update to our fetching code

63. Coding the Sad Path - Loading state (new)

64. Coding the Sad Path - Error handling

65. Update: Accessibility Addition

66. Initial Login Form

67. Note from the future: importing image assets in Vite

68. Protected Routes Intro (FDCP)

69. Protected Routes - AuthRequired Layout Route (FDCP)

70. Protected Routes - Implementing "auth" (FDCP)

71. Protected Routes - Navigate (FDCP)

72. VanLife Protected Routes (FDCP)

73. Protected Routes Quiz

74. Navigation State (FDCP)

75. Setup for authentication - happy path (FDCP)

76. Authentication setup - sad path (FDCP)

77. Navigate to /host route after login (FDCP)

78. History Stack and Replace (FDCP)

79. Challenge - send user to original page

80. Placeholders are gone! 🎉

81. Cloud Firestore Setup 🔥

82. Cloud Firestore Code Setup

83. Collection ref and getVans() function

84. Create getVan function

85. Refactor getHostVans function

86. Final loose ends