Navbar using React Bootstrap, Responsive Navbar, React router dom on navbar 2021 | 2022

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

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

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

    Thank you very much, It's very helpful , regards and Jesus' Blessings from Lima Peru

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

      Glad you like it, please don't forget to subscribe to my TH-cam channel.

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

    Great work on this video. As noted in a comment below, the Switch has been replaced with Routes but aside from that this is a great overview of how to set up a multi page react SPA. Thank you!

  • @SivaKumar-jb7xk
    @SivaKumar-jb7xk 2 ปีที่แล้ว +2

    Quick video on the nav bar, superb. Please update that the 'Routes' has replaced the 'Switch' functionality.

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

      I have already published video with updated Routes please go through my channel.

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

      Change the 'Switch' to 'Routes' in the following import:
      import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

      This worked for me.

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

    For anyone following this tutorial.. Incase the routing bit does not work, try importing Route, Routes as Switch is omitted in v6 of react router DOM!

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

      Thanks for sharing ! I have already published another video addressing the issue.

  • @mubashar-nouman
    @mubashar-nouman ปีที่แล้ว +9

    For those who are getting error of switch export:-
    𝐒𝐨𝐥𝐮𝐭𝐢𝐨𝐧#𝟎𝟏
    In react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from
    import { Switch, Route } from "react-router-dom";
    to
    import { Routes ,Route } from 'react-router-dom';
    You also need to update
    to
    𝐒𝐨𝐥𝐮𝐭𝐢𝐨𝐧#𝟎𝟐
    uninstall the version 6 of react-router-dom:
    npm uninstall react-router-dom
    And installed version 5.2.0 of react-router-dom:
    npm install react-router-dom@5.2.0

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

    all in one just 13 min your explanation great bro💔

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

    This video is very helpful Thank you so much I will share this video with my classmates ❤️💙 thank you so much

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

    Thanks man finally I got the real react bootstrap router video, and I was using material ui that seems difficult for me

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

    Very good tutorial! Straight to the point and also very insightful on how to look up documentation by yourself. Thank you so much!

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

    you got the job done, but it was very messy demo

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

    Thank you most of the tutorial i searh is just creating navbar without functionality

    • @CodeWithArjun
      @CodeWithArjun  3 ปีที่แล้ว

      Glad it helped you . Please don't forget to subscribe.

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

    Thank you so much for the support. I made 100% to subcribed your Chanel

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

      Awesome thank you! Be sure to subscribe.

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

    Thanks for this tutorial please upload more videos for creating website using react with bootstrap

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

    Finally it worked thx so much

  • @sonu4738
    @sonu4738 9 หลายเดือนก่อน +1

    thankyou you saved my day today
    😊😊😊😊😊

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

    Please can you make a video on how to navigate into multiple pages after clicking a navbar?

  • @Micha-ig6ic
    @Micha-ig6ic 2 ปีที่แล้ว

    Works fine, but where is menu hide property after u click menu item?

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

    awesome tutorial, straight to the point and a good pace

  • @viram4478
    @viram4478 3 ปีที่แล้ว

    Thank you! Very good explanation!
    How do we route to the .
    "as={Link} to=" does not seem to be working.

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

    very good tutorial! I really learned a lot. I have one issue tho. I can't swith between pages until i press enter. It's not doing it when I click :(

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

      I have other video for navbar check on my channel.

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

    that's the best tutorial!!!!

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

    The way he calls bootstrap as "bootystrap" cracks me up a little.

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

    Thank you. Your video was very helpful

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

    Thank you so much. It’s very helpful

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

      Glad it was helpful! Be sure to subscribe.

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

    Brilliant Arjun!

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

    Awesome and to the point!

    • @CodeWithArjun
      @CodeWithArjun  3 ปีที่แล้ว

      Glad it was helpful for you. Be sure to subscribe to my channel.

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

    Is react-router-dom the only way to go with this? There is no built in functionality for this in react or even react-bootstrap?

    • @CodeWithArjun
      @CodeWithArjun  3 ปีที่แล้ว

      No unlike angular react doesn't have built in routing functionality, use have to use react-router-dom.

    • @princeyohannan2979
      @princeyohannan2979 3 ปีที่แล้ว

      th-cam.com/video/d0NrTG2yhiw/w-d-xo.html

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

    thanks man nice tutorial!

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

    Helped alot, thanks!

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

      Glad to hear it! Be sure to subscribe.

  • @syawadhilahpradipta828
    @syawadhilahpradipta828 3 ปีที่แล้ว

    When I start npm start, it shows only navbar, but the body was blank, even though I have something on the body.do you know why?

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

    Thank you so much you are a blessing!

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

    good job👏

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

    well done man!!

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

      Thank you Be sure to subscribe.

  • @airahjanetano7711
    @airahjanetano7711 7 หลายเดือนก่อน +1

    THANK YOU SO MUCH!!

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

    Everytime "let me" is said drink 1 shot

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

    I'm getting this Error-----export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

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

      I have published new video on the same topic see on the end screen or link in the description.

  • @ijash-yt
    @ijash-yt 3 ปีที่แล้ว +1

    is react-bootstrap still relevant? why not using vanilla bootstrap 5?

    • @CodeWithArjun
      @CodeWithArjun  3 ปีที่แล้ว

      I will try using that. Don't forget to subscribe my channel. I use material UI normally.

  • @sherhanan1219
    @sherhanan1219 3 ปีที่แล้ว

    outstanding explanation

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

      Thank you! so much don't forget to subscribe my channel

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

    Thanks for this tutorial

    • @CodeWithArjun
      @CodeWithArjun  3 ปีที่แล้ว

      Welcome, Please don't forget to subscribe.

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

    Why does my navbar stays in the middle of the screan and not in the top???

  • @felixfigueroa
    @felixfigueroa 3 ปีที่แล้ว

    Thanks..! fast and perfect..!

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

    very useful thanks

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

    The selection state of the Link disappears after selected. How do I keep selection?

  • @תומרקיסר
    @תומרקיסר 3 ปีที่แล้ว +1

    The best
    Thank U
    :)

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

    I have installed react-router-dom. and I got an error said "Attempted import error: 'Switch' is not exported from 'react-router-dom'." Do you know why?

    • @CodeWithArjun
      @CodeWithArjun  3 ปีที่แล้ว

      Now in new version you have to use instead of Switch use older version instead it will work for you.

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

      @@CodeWithArjun i used instead of now my navbar is not showing and my browser console is showing errors

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

      @@bbbzbdbsns Instead of using use
      Likewise for About and Home. If you again get problem jion discord, I can help you to solve.

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

      @@CodeWithArjun Tried changing the Route Path still getting errors in console about "Router"'

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

      @@omaraly3296 I have published new video for that check out on my channel.

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

    Thank You.

  • @ashif-anoop8062
    @ashif-anoop8062 3 ปีที่แล้ว +2

    i am getting this error " Attempted import error: 'Switch' is not exported from 'react-router-dom'. "

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

      Add this to the navbarcomp
      import {
      BrowserRouter as Router,
      Switch,
      Route,
      Link
      } from "react-router-dom";

    • @syawadhilahpradipta828
      @syawadhilahpradipta828 3 ปีที่แล้ว

      @@ProjetoCloudcom I did added Switch on the import but its still gave me the same error

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

      @@syawadhilahpradipta828 did you solve it. I am getting the same error

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

      @@syawadhilahpradipta828found the solution

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

    how to you create links to the dropdown

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

    thank you arjun

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

      Is it working ? for newer version or you replaced with ?

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

      @@CodeWithArjun i will try later arjun

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

      @@CodeWithArjun what version of react boostrap is that arjun?

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

      @@pejuagsuksss Not for bootstrap i was taling about react router dom version 6. I am publishing new video today watch that.

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

      @@CodeWithArjun ok sir i will watch later

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

    It is useful

  • @alperencan4939
    @alperencan4939 3 ปีที่แล้ว

    bro still same screen at 2:10. it doesnt write hello

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

    why when i type "rcc" nothing happend please i need help

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

      install react sniplets from the extension of vscode.

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

      @@CodeWithArjun thank you 😍

  • @sherhanan1219
    @sherhanan1219 3 ปีที่แล้ว

    and one more thing how can i become good in react js

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

      master basics and try to build some projects

    • @princeyohannan2979
      @princeyohannan2979 3 ปีที่แล้ว

      th-cam.com/video/d0NrTG2yhiw/w-d-xo.html

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

    switch d'not react router dom 6
    switch => routes

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

      i have already got new video using routes you can check out on my channel.

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

    where is the source code

    • @CodeWithArjun
      @CodeWithArjun  3 ปีที่แล้ว

      Visit my github account arjungautam1

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

      @@CodeWithArjun its not there you repo is empty

    • @CodeWithArjun
      @CodeWithArjun  3 ปีที่แล้ว

      @@digender now check i have just uploaded. or you can directly find the link on description.