How To Create A Navbar In React With Routing

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ธ.ค. 2024

ความคิดเห็น • 192

  • @krishgarg2806
    @krishgarg2806 2 ปีที่แล้ว +191

    Just for info: There is a NavLink component in react-router which will add "active" class if that link is currently active automatically. Saves some boilerplate code!

    • @jaysongoku2274
      @jaysongoku2274 2 ปีที่แล้ว +2

      Hey, I just found out about NavLink. What do you think its usecases?

    • @terragady
      @terragady 2 ปีที่แล้ว +18

      @@jaysongoku2274 obviously nav bar items :D

    • @zmasterar
      @zmasterar 2 ปีที่แล้ว

      I was about to say the same thing

    • @dave6012
      @dave6012 2 ปีที่แล้ว +7

      activeClassName was deprecated in react-router-dom v.6

    • @chidiebereuzoma1635
      @chidiebereuzoma1635 2 ปีที่แล้ว

      @@dave6012 you use an inline function passed as value of a prop instead

  • @NiaNic425
    @NiaNic425 ปีที่แล้ว +13

    This is so great for portfolios! I was just considering moving my web portfolio from the old php mysql to react since I dont have much data to use for database anyway. Learning react, about routes and being able to update portfolio all at the same time with this vid thank you so much man!

  • @smile4self
    @smile4self 4 หลายเดือนก่อน +2

    short, simple and straight to the point. its 2024... Still very useful and relevant... thanks for breaking this down to the simplest...

  • @derf579111
    @derf579111 2 ปีที่แล้ว +2

    Without even watching the video, I already know this was EXACTLY what I was looking for today from you...weird how life works out like that.

  • @luthfijuang4433
    @luthfijuang4433 ปีที่แล้ว +2

    Thanks so much bro, you are helping me so much on my first project as an intern, keep going bro and i always will be your subscriber.

  • @Wampiroh
    @Wampiroh 2 ปีที่แล้ว

    I don't know if you know this, but your content saves lives.
    Thank you so much!

  • @sayyadtanzeem9495
    @sayyadtanzeem9495 2 ปีที่แล้ว

    Thanks Kyle!! I have been stuck at react routing errors. My pages won't show on my home page but after watching your video. I got solution. Keep growing brother.

  • @athuljonnie
    @athuljonnie 11 หลายเดือนก่อน

    Thanks Kyle! I was working on my Company's official page and this video saved my day!

  • @balrogmorgoth2360
    @balrogmorgoth2360 2 หลายเดือนก่อน

    Thank you, i adjusted my own html and css code into this, and it works well!

  • @ThourCS2
    @ThourCS2 2 ปีที่แล้ว +9

    Breaking down tutorials in components this way is the way to go.
    Thank you so much for this.

  • @CrystalButterfly_Sadhanad
    @CrystalButterfly_Sadhanad 7 หลายเดือนก่อน

    I am a beginner for using react. Your explanation helps me a lot.

  • @stainsmault441
    @stainsmault441 ปีที่แล้ว

    Thank You so much, was trying different docs and couldn't make it work, Finally found your video and made it done

  • @MarcoCrupiPhotography
    @MarcoCrupiPhotography 2 ปีที่แล้ว +2

    The final part of your tutorial saved me from a big problem, thanks, you taught me so much!

  • @JeanDidier
    @JeanDidier 2 ปีที่แล้ว

    Searched this morning "AlpineJS router" and Kyle released this video 5 hours later 🤔. Thank you so much for the first router solution. I am amazed at how these things are so easy to you

  • @SaliAalaNabiyak
    @SaliAalaNabiyak ปีที่แล้ว +3

    for the hook to get the current locatin you can just use one hook it is : useLocation()
    it's gonna return an obj containing the pathname which we are looking for so the after importing the hook your code should look like this :
    const location = useLocation()
    let path = location.pathname

    • @duanedodson1
      @duanedodson1 ปีที่แล้ว

      I'm sure he knows that, but you can't give away too many trade secrets in a free video.

  • @shenseanchen
    @shenseanchen 2 ปีที่แล้ว

    Thanks!

  • @ayandandlovu5253
    @ayandandlovu5253 5 หลายเดือนก่อน

    If you only knew how I struggled with this today? 😭 Thank you sm❤

  • @muwahid2380
    @muwahid2380 8 หลายเดือนก่อน

    actual goat video only making this comment to help u in the algorithm cause u deserve it

  • @ian_fraser
    @ian_fraser 2 ปีที่แล้ว

    Hey Kyle, thanks for making this. I've come across your channel over the last couple of weeks and finding if really useful! Brilliant.

  • @romanusolcev
    @romanusolcev 2 ปีที่แล้ว

    A few more that kind of video and i'll fall in love with React)

  • @HumanAction76
    @HumanAction76 ปีที่แล้ว

    Easy to follow along, and I like you show how to route with and without react-router-dom. Thanks for the tutorial.

  • @richardwrites
    @richardwrites 2 ปีที่แล้ว

    Works, thanks!

  • @shenseanchen
    @shenseanchen 2 ปีที่แล้ว +1

    You are amazing! Thanks for simplifying web dev in such a clear way!

  • @mirkoat22
    @mirkoat22 3 หลายเดือนก่อน

    Thank you! These videos really help out, keep up the great work!

  • @memmuw
    @memmuw ปีที่แล้ว

    Thank you brother, router was doing my head in.

  • @rajireddyaleti6346
    @rajireddyaleti6346 2 ปีที่แล้ว +8

    Hey Kyle, I'm a fan of yours. I like the way you make the content much simpler to understand.
    Can you start some Javascript(React) tooling-related videos to make them more understandable? I don't know most of the things why we need some libs as dependencies and soon in a while in 2yrs to 3yrs they are deprecating/outdated

  • @dawiddawid5533
    @dawiddawid5533 ปีที่แล้ว

    Thank You VERY VERY much. Great explanation. U are a gifted teacher and thanks one more time

  • @firstdbzmaker
    @firstdbzmaker ปีที่แล้ว

    I'm a fan of the teaching style :D

  • @usmanaslam750
    @usmanaslam750 2 ปีที่แล้ว

    Thanks a lot. after watcing your amazing learning video, i am able to resolve problem related to React Router.
    once again, Thanks a lot..........................

  • @Babisimo
    @Babisimo 2 ปีที่แล้ว +3

    ty for simplifying the web for me

  • @anantsaxena5454
    @anantsaxena5454 ปีที่แล้ว

    Thankyou so much i was stuck on this for hours 😭😭

  • @classicdrumpercussion1608
    @classicdrumpercussion1608 2 ปีที่แล้ว

    Thank you, I have learned a lot of things from today's video. Good luck with your work.

  • @FinepixF30
    @FinepixF30 ปีที่แล้ว

    Excellent tutorial, helped a lot with my react website nav bar menu.

  • @anasyoussi514
    @anasyoussi514 ปีที่แล้ว

    Bro Thanks a lot this is what I've been looking for.

  • @ethiocode298
    @ethiocode298 2 ปีที่แล้ว +13

    I think we can use NavLink instead of Link for active state

  • @fletcherrat337
    @fletcherrat337 ปีที่แล้ว

    Great video bud. Really nailed the params of an exercise I am working on for a bootcamp with only a little bit of adjustment. Subbed today so look forward to see what you release in the future!

  • @againstthegrain5914
    @againstthegrain5914 2 ปีที่แล้ว

    This came at the right time! Thanks buddy!

  • @JordantheComputerScientist
    @JordantheComputerScientist ปีที่แล้ว

    You are really helping me with react !

  • @merabet.faycal
    @merabet.faycal 2 ปีที่แล้ว +1

    easy and great as always , Thank you !

  • @looterbmgo5545
    @looterbmgo5545 2 ปีที่แล้ว +1

    Finally, I've been waiting for a new video to come. What time do you post videos? (2d, 5d, 1w or something else)

  • @captainsano4221
    @captainsano4221 ปีที่แล้ว

    Keep up the great work!!

  • @TimothyVandeweerd
    @TimothyVandeweerd 2 ปีที่แล้ว

    Thank you so much, it was exactly what I was looking for. What a great tutorial!

  • @AbdulmajidAlamyar
    @AbdulmajidAlamyar ปีที่แล้ว

    Thank you so much for the video. It really helped me with my assingment.

  • @empoweredsouls-relaxingmus6074
    @empoweredsouls-relaxingmus6074 2 ปีที่แล้ว

    Thankyou so much you made my day sir

  • @paulneumann7739
    @paulneumann7739 2 ปีที่แล้ว +2

    Thank you great video. Your a machine! Appreciate the information
    Even Your hair is even doing 100 km/hr.
    Mine does 30 km/hr like a kids school zone! Just like my coding skills.

  • @marybush4785
    @marybush4785 ปีที่แล้ว

    Thank you so much for your video it helped me out alot.

  • @Smurfis
    @Smurfis 7 หลายเดือนก่อน

    Thank you for show-casing this as we can now use this to create an amazing display system perhaps you could make it more of a hamburger menu! Thank you!

  • @thejomviking
    @thejomviking 10 หลายเดือนก่อน

    Thanks Chief, I have been struggling to find the reason why i'm getting a blank white page for two weeks now and i just found out i didn't add the BrowserRouter into the index.tsx root render function

  • @naciribraimo7967
    @naciribraimo7967 2 ปีที่แล้ว

    Thank you for sharing your knowledge

  • @lurelurche
    @lurelurche ปีที่แล้ว

    Thanks, I love your angel hair. Keep it up !

  • @JuanPortalG
    @JuanPortalG ปีที่แล้ว

    You're the GOAT 🙌🏽

  • @baktiyaryerkinov1045
    @baktiyaryerkinov1045 ปีที่แล้ว +1

    Good job!

  • @paterfamilias01
    @paterfamilias01 2 ปีที่แล้ว +2

    Hi, can you make a video of vanilla js routing? great videos!

  • @alanchavez16
    @alanchavez16 2 ปีที่แล้ว

    Thanks for this knowledge!

  • @BongProgramiz
    @BongProgramiz 2 ปีที่แล้ว +1

    Nice work ✌️

  • @jtaylor8606
    @jtaylor8606 2 ปีที่แล้ว

    Excellent vid, really clear and help[ed me fix a problem that I'd been battling with all day :-)

  • @utvikler-no
    @utvikler-no 2 ปีที่แล้ว

    you are a legend! Thanks!

  • @Pakinam865
    @Pakinam865 ปีที่แล้ว

    This saved me!! thank you

  • @jpj7087
    @jpj7087 10 หลายเดือนก่อน

    crazy good video !

  • @hmleao
    @hmleao 2 ปีที่แล้ว +2

    How would you organize a multi page react app? I've seen you've separated the pages in a folder. What about components of these pages? CSS and all the good stuff?

  • @feynthefallen
    @feynthefallen 2 ปีที่แล้ว +1

    Interesting how you have the same ideas I have, like organizing the components the router references as "pages".

  • @MahaDBTScholarshipOfficial
    @MahaDBTScholarshipOfficial 2 ปีที่แล้ว +1

    Great 👍

  • @daviskatana8723
    @daviskatana8723 2 ปีที่แล้ว

    Great tutorial

  • @gopalloharnew5948
    @gopalloharnew5948 2 ปีที่แล้ว +1

    It Very Easy ... Can't believe react is so easy ...
    or it's your magic ...
    who know !

  • @castaway429
    @castaway429 ปีที่แล้ว

    This is a great video and tutorial! However, is a way where you can transfer data between these pages like if someone clicks a link on your pricing screen it brings it to a new screen to pay with the payment plan selected

  • @JainamSutaria777
    @JainamSutaria777 2 ปีที่แล้ว +2

    please make more videos on React

  • @NNNedlog
    @NNNedlog 2 ปีที่แล้ว

    Thanks a lot for this tutorial

  • @KimberlyRuzivoMunyoro
    @KimberlyRuzivoMunyoro 5 หลายเดือนก่อน

    Many thanks!!!!!

  • @rehyannsaini
    @rehyannsaini 3 หลายเดือนก่อน

    Thanks Buddy

  • @jacoblamberson3751
    @jacoblamberson3751 ปีที่แล้ว

    18:05 can someone explain why doing this is necessary... if your website only has a few tabs

  • @asphaltking5870
    @asphaltking5870 2 ปีที่แล้ว

    Omg thank you so much

  • @umidjon_tuychiyev
    @umidjon_tuychiyev 2 ปีที่แล้ว

    great job bro

  • @sunilbehera7380
    @sunilbehera7380 2 ปีที่แล้ว

    Thanks Kyle.

  • @8ack2Lobby
    @8ack2Lobby 2 ปีที่แล้ว

    05:00 can anyone clear this concept? Why active class have to go above hover for it to work?

  • @aliuabdulmanaf353
    @aliuabdulmanaf353 ปีที่แล้ว

    Thank you big boss

  • @Smith-fg1qb
    @Smith-fg1qb 5 หลายเดือนก่อน +1

    I get most of this. The only only I’m confused about is why you put display flex in .navbar a

  • @andresramirez4469
    @andresramirez4469 2 ปีที่แล้ว +1

    can you also use something like component={Home} when you write the routers?

  • @charlottecayre
    @charlottecayre ปีที่แล้ว

    ERROR in [eslint]
    src/NavBar.js
    Line 25:24: 'path' is not defined no-undef
    Hello, what does this mean?

  • @cdey3886
    @cdey3886 2 ปีที่แล้ว +1

    I know it's not the goal for this video, but you should make a video on how to make a responsive React navbar as it's one of the things I struggled when I started.

    • @MrzKeri09
      @MrzKeri09 2 ปีที่แล้ว

      This is currently me

  • @jorgemejia1586
    @jorgemejia1586 2 ปีที่แล้ว

    thanks for the video baby

  • @Emerald13
    @Emerald13 2 ปีที่แล้ว

    Thank you

  • @willyhorizont8672
    @willyhorizont8672 2 ปีที่แล้ว

    Thanks kyle

  • @jmann2885
    @jmann2885 2 ปีที่แล้ว +2

    Can u plz create a web development guide for 2022 as u created in 2021 ….thanks in advance

  • @TheZx9man
    @TheZx9man 2 ปีที่แล้ว +1

    Thank you! This course was very useful for me - really nice :) I consider to change a small PHP app with Mysql DB to React-app for a better frontend. The only thing that trouble me is, that I can do no POST requests (e.g. for mail) to PHP scripts without using php://input thing. Would you advise to do this rather with javascript XHR-Request / Promises than php://input?

    • @Cpd9
      @Cpd9 ปีที่แล้ว +1

      Hello. You can use React JS for the front end and connect it to a PHP framework like Laravel for the backend since you’re already comfortable with PHP.
      You have options, so you can connect your react front end framework to almost any backend for POST requests and CURD, like express & node js; Laravel; or Django for example.

  • @remotefarm4577
    @remotefarm4577 2 ปีที่แล้ว

    great video thx

  • @mukeshpandey9993
    @mukeshpandey9993 ปีที่แล้ว

    awesome thanks

  • @monarchgam3r
    @monarchgam3r 2 ปีที่แล้ว

    I never these hooks existed, normally I would use the useLocation hook, and the the location.pathname.. then use said pathname to compare if it matches to the target pathname to add active classes..
    Well, at least I learnt something new.. thanks

  • @enzoscandelt3350
    @enzoscandelt3350 2 ปีที่แล้ว

    4:00 styling

  • @NahidHasan-xp1cl
    @NahidHasan-xp1cl ปีที่แล้ว

    Love You Boss

  • @Justsayingmythoughts
    @Justsayingmythoughts 2 ปีที่แล้ว

    What do you mean by active state? What are the differences when you implement it so that it is in such a state compared to the previous routing implementation without react router?

    • @Justsayingmythoughts
      @Justsayingmythoughts 2 ปีที่แล้ว

      Nevermind, I now understand it as allowing the active class concept.

  • @Dustyy01
    @Dustyy01 2 ปีที่แล้ว +1

    Can you make a video about blazor?

  • @chrisskyr623
    @chrisskyr623 2 ปีที่แล้ว +1

    Kyle, I have a problem. I am hosting my website with firebase the navbar works awesome but if I try to write the url it sends me to the 404 page. How I can make it when I write a url with the page to load automaticaly??

  • @gigxr
    @gigxr 2 ปีที่แล้ว

    i love u bro thanks a lot

  • @alishok9199
    @alishok9199 ปีที่แล้ว

    Thanks,.please make breadcrumb

  • @snehalshaevya5598
    @snehalshaevya5598 2 ปีที่แล้ว

    Please make a video on nested routes

  • @hardwired66
    @hardwired66 2 ปีที่แล้ว

    best practice react folder structure and state management sir

  • @waleedsharif618
    @waleedsharif618 2 ปีที่แล้ว

    Could you make tutorial video on React unit testing ?

  • @lahertrivedi4887
    @lahertrivedi4887 10 หลายเดือนก่อน

    hello Kyle! Hope you are fine i wanted to ask that this code can be written in Notepad ++ ?

  • @aynuayex
    @aynuayex ปีที่แล้ว

    please make a video on how to implement remember me in react js

  • @WhatIfWeebs
    @WhatIfWeebs 3 หลายเดือนก่อน

    bro he is unhumanly fast.