Learn React Router v6 - Full Course

2024 ж. 16 Мам.
34 825 Рет қаралды

Learn how to use React Router. You'll learn about setting up a basic routes, protecting authenticated routes, custom route transitions and more.
Course created by @CounterSyntax
💻 Starter Project/Boilerplate code: github.com/Kolosafo/git-explorer-starter
💻 Git Explorer Final: github.com/Kolosafo/git-explo...
⭐️ Contents ⭐️
⌨️ (0:00:00) Course Overview
⌨️ (0:02:23) Introduction To React Router
⌨️ (0:05:08) Project Overview
⌨️ (0:07:01) Project Setup
⌨️ (0:09:23) Installing React Router
⌨️ (0:10:33) Setting up React Router
⌨️ (0:14:11) Introduction to Routing
⌨️ (0:20:37) Boilerplate code
⌨️ (0:21:23) Adding a new Route
⌨️ (0:22:12) How to Navigate between Pages
⌨️ (0:25:01) Nested Routes
⌨️ (0:31:37) Creating a custom "Not Found" page
⌨️ (0:35:30) Dynamic Routing
⌨️ (0:43:34) Programmatic Navigation
⌨️ (0:53:27) Route Guarding
⌨️ (1:02:45) Navbar Adjustment
⌨️ (1:06:07) Navigation Transition Animation
⌨️ (1:16:54) Lazy Loading
⌨️ (1:24:34) Advanced Route Config
⌨️ (1:37:09) The Final Project
⌨️ (1:38:09) The END!
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

Пікірлер
  • Omg I was looking for a course on React Router. Thank you!!

    @iamtharunraj@iamtharunrajАй бұрын
  • this is awesome thank you!

    @unluckyhozay@unluckyhozayАй бұрын
  • Nice course. Thanks for this quality content

    @olisaemekaaghabuilo8688@olisaemekaaghabuilo868828 күн бұрын
  • This is a very nice content. God bless the creator

    @kehindegilbert2699@kehindegilbert2699Ай бұрын
  • Waiting for this

    @gaintakwa9057@gaintakwa9057Ай бұрын
  • Great course, nice refresher. Thanks

    @hericles10@hericles109 сағат бұрын
  • Sir thanks for that video kindly make a complete react course

    @hamaadafzal2490@hamaadafzal2490Ай бұрын
  • Wow nice thanks for sharing the knowledge, awesome content 🫡🙏🤲👍👌

    @mahendranath2504@mahendranath2504Ай бұрын
  • Great tutorial ❤

    @The_Developer_@The_Developer_27 күн бұрын
  • Just finished the video. Good work👍👍. Please more DevOps course😘

    @jirayuvijjakajohn295@jirayuvijjakajohn295Ай бұрын
    • How did you finish a video that is 100+ minutes long and was just uploaded 6 minutes ago?? That would be 1000X speed viewing

      @khalidelgazzar@khalidelgazzarАй бұрын
    • What the hell man?

      @jostasizzi818@jostasizzi818Ай бұрын
    • You're kidding😅

      @smartdriver2990@smartdriver2990Ай бұрын
    • Lol this is not even devops course😂

      @bullyversal5313@bullyversal5313Ай бұрын
    • Bot 😂😂😂

      @iamtharunraj@iamtharunrajАй бұрын
  • Adding to my to-watch list

    @khalidelgazzar@khalidelgazzarАй бұрын
    • and youll never gonna watch it like the other ones :D

      @igetpaidtocode@igetpaidtocodeАй бұрын
    • @@igetpaidtocode lol true

      @sudo_sunil@sudo_sunil17 күн бұрын
  • Thanks n word guys op brother

    @drazzo777cod7@drazzo777cod7Ай бұрын
  • Cool!

    @forellko8600@forellko8600Ай бұрын
  • Isn't the mew method is createBrowserRouter?

    @ashish2438@ashish2438Ай бұрын
  • This doesn't look like v6, correct me if I'm wrong though...

    @ichiroutakashima4503@ichiroutakashima4503Ай бұрын
    • I don't think its latest release.

      @pratiksavaliya3890@pratiksavaliya3890Ай бұрын
  • 🎉

    @gaintakwa9057@gaintakwa9057Ай бұрын
  • The features used in this course are not from react router dom version 6 , these are the features which are belonged to version 5 , isn't it

    @kishorekevin5372@kishorekevin537227 күн бұрын
  • I built a page for a client and he was screaming for more pages well here you go :) thank you

    @kantorobo7718@kantorobo7718Ай бұрын
  • Please make updated react appwrite course

    @AbdulAziz-pm6lk@AbdulAziz-pm6lkАй бұрын
  • Bob ziroll already made a more comprehensive course about react Router V6, the best thing you'd have done is create one on how to use react Router v6 and Redux/toolkit and RTK Query. but good job anyway

    @nakayuni@nakayuniАй бұрын
  • 🎉🎉🎉🎉🎉🎉

    @cocoatea57@cocoatea57Ай бұрын
  • Bring the new browser functionality in new version

    @MrKsvignesh@MrKsvigneshАй бұрын
  • Cyber security course needed

    @krishmistry1422@krishmistry1422Ай бұрын
  • getting this error on the latest routing dom, I am using vite, react + ts please help "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.3" }, here there is a red line under exact Type '{ exact: true; path: string; Component: () => Element; }' is not assignable to type 'IntrinsicAttributes & RouteProps'. Property 'exact' does not exist on type 'IntrinsicAttributes & RouteProps'.ts(2322)

    @sohanhossain3449@sohanhossain3449Ай бұрын
    • I think it should be "element" attribute instead of "Component"

      @dexter00076@dexter00076Ай бұрын
    • 'component' prop is from React Router 5 and has been replaced by 'element' prop in React Router 6

      @sourya111@sourya111Ай бұрын
    • @@sourya111 Thanks a lot boss.

      @sohanhossain3449@sohanhossain3449Ай бұрын
    • @@dexter00076 great. thanks

      @sohanhossain3449@sohanhossain3449Ай бұрын
    • "exact" prop is removed

      @FrontierDevCode@FrontierDevCode15 күн бұрын
  • Please give us dev ops course

    @Aman_yadav1419@Aman_yadav1419Ай бұрын
  • Sir pls bring AIML complete course

    @mayureshbalsaraf2696@mayureshbalsaraf2696Ай бұрын
  • John appears to be a potato ☠️

    @sleepingdog12@sleepingdog12Ай бұрын
  • Laravel 11

    @AkuBapakMu24@AkuBapakMu24Ай бұрын
  • The features used in this course are not from react router dom version 6 , these are the features which are belonged to version 5 , isn't it

    @kishorekevin5372@kishorekevin537227 күн бұрын
KZhead