Learn React Router v6 - Full Course

Поделиться
HTML-код
  • Опубликовано: 12 май 2024
  • 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

Комментарии • 42

  • @iamtharunraj
    @iamtharunraj Месяц назад +4

    Omg I was looking for a course on React Router. Thank you!!

  • @olisaemekaaghabuilo8688
    @olisaemekaaghabuilo8688 23 дня назад

    Nice course. Thanks for this quality content

  • @unluckyhozay
    @unluckyhozay Месяц назад +1

    this is awesome thank you!

  • @hamaadafzal2490
    @hamaadafzal2490 Месяц назад +3

    Sir thanks for that video kindly make a complete react course

  • @kehindegilbert2699
    @kehindegilbert2699 Месяц назад +1

    This is a very nice content. God bless the creator

  • @mahendranath2504
    @mahendranath2504 Месяц назад

    Wow nice thanks for sharing the knowledge, awesome content 🫡🙏🤲👍👌

  • @gaintakwa9057
    @gaintakwa9057 Месяц назад

    Waiting for this

  • @The_Developer_
    @The_Developer_ 22 дня назад

    Great tutorial ❤

  • @jirayuvijjakajohn295
    @jirayuvijjakajohn295 Месяц назад +3

    Just finished the video. Good work👍👍. Please more DevOps course😘

    • @khalidelgazzar
      @khalidelgazzar Месяц назад +1

      How did you finish a video that is 100+ minutes long and was just uploaded 6 minutes ago?? That would be 1000X speed viewing

    • @jostasizzi818
      @jostasizzi818 Месяц назад +1

      What the hell man?

    • @smartdriver2990
      @smartdriver2990 Месяц назад

      You're kidding😅

    • @bullyversal5313
      @bullyversal5313 Месяц назад

      Lol this is not even devops course😂

    • @iamtharunraj
      @iamtharunraj Месяц назад +1

      Bot 😂😂😂

  • @drazzo777cod7
    @drazzo777cod7 Месяц назад

    Thanks n word guys op brother

  • @forellko8600
    @forellko8600 Месяц назад

    Cool!

  • @khalidelgazzar
    @khalidelgazzar Месяц назад +1

    Adding to my to-watch list

    • @igetpaidtocode
      @igetpaidtocode Месяц назад +6

      and youll never gonna watch it like the other ones :D

    • @sudo_sunil
      @sudo_sunil 12 дней назад

      @@igetpaidtocode lol true

  • @ichiroutakashima4503
    @ichiroutakashima4503 Месяц назад +9

    This doesn't look like v6, correct me if I'm wrong though...

  • @nakayuni
    @nakayuni Месяц назад

    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

  • @ashish2438
    @ashish2438 Месяц назад +3

    Isn't the mew method is createBrowserRouter?

  • @AbdulAziz-pm6lk
    @AbdulAziz-pm6lk Месяц назад

    Please make updated react appwrite course

  • @kantorobo7718
    @kantorobo7718 Месяц назад +1

    I built a page for a client and he was screaming for more pages well here you go :) thank you

  • @gaintakwa9057
    @gaintakwa9057 Месяц назад

    🎉

  • @kishorekevin5372
    @kishorekevin5372 22 дня назад

    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

  • @MrKsvignesh
    @MrKsvignesh Месяц назад +2

    Bring the new browser functionality in new version

  • @cocoatea57
    @cocoatea57 Месяц назад

    🎉🎉🎉🎉🎉🎉

  • @krishmistry1422
    @krishmistry1422 Месяц назад

    Cyber security course needed

  • @Aman_yadav1419
    @Aman_yadav1419 Месяц назад +1

    Please give us dev ops course

  • @sohanhossain3449
    @sohanhossain3449 Месяц назад

    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)

    • @dexter00076
      @dexter00076 Месяц назад

      I think it should be "element" attribute instead of "Component"

    • @sourya111
      @sourya111 Месяц назад

      'component' prop is from React Router 5 and has been replaced by 'element' prop in React Router 6

    • @sohanhossain3449
      @sohanhossain3449 Месяц назад

      @@sourya111 Thanks a lot boss.

    • @sohanhossain3449
      @sohanhossain3449 Месяц назад

      @@dexter00076 great. thanks

    • @FrontierDevCode
      @FrontierDevCode 11 дней назад

      "exact" prop is removed

  • @mayureshbalsaraf2696
    @mayureshbalsaraf2696 Месяц назад

    Sir pls bring AIML complete course

  • @AkuBapakMu24
    @AkuBapakMu24 Месяц назад

    Laravel 11

  • @sleepingdog12
    @sleepingdog12 Месяц назад +2

    John appears to be a potato ☠️

  • @kishorekevin5372
    @kishorekevin5372 22 дня назад

    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