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

Responsive Navbar using React Bootstrap, React Router dom for routing. Create navbar using react it's responsive and toggleable navbar.
Source Code : github.com/arjungautam1/Navba...
New Video on Navbar : • Responsive Navbar usin...
Command :
Create React App : $ npx create-react-app navbar-demos
Run App : npm start
Install React Bootstrap :
$ npm install react-bootstrap bootstrap@4.6.0
or use yarn
$ yarn install react-bootstrap bootstrap@4.6.0
Source Code : github.com/arjungautam1/Navba...
React Js playlist : • React Router | Router,...
➡️ Subscribe : / codewitharjun
Stay Connected :
➡️ LinkedIn : / arjungautam1
➡️ Github : github.com/arjungautam1
Join Community :
➡️Discord : / discord
Follow me on :
➡️ Medium: / codewitharjun
➡️ Dev.to : dev.to/codewitharjun
#React #bootstrap #Navbar #CodeWithArjun

[@manuelretamozo9278]

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

[@CodeWithArjun]

Glad you like it, please don't forget to subscribe to my RUclips channel.

[@warmogs3955]

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

[@CodeWithArjun]

Thank you so much.

[@toddh2327]

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!

[@CodeWithArjun]

Glad to help.

[@brett3554]

awesome tutorial, straight to the point and a good pace

[@CodeWithArjun]

Glad it was helpful.

[@simple8810]

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

[@CodeWithArjun]

Glad you liked it.

[@yourdailygymclips]

Finally it worked thx so much

[@mlLearning490]

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

[@CodeWithArjun]

Thank you so much mate.

[@viram4478]

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

[@khanf13]

Awesome and to the point!

[@CodeWithArjun]

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

[@SivaKumar-jb7xk]

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

[@CodeWithArjun]

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

[@toddh2327]

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

This worked for me.

[@ethancemer8679]

Thank you so much you are a blessing!

[@CodeWithArjun]

You are so welcome

[@sajibahmed872]

Thank you so much. It’s very helpful

[@CodeWithArjun]

Glad it was helpful! Be sure to subscribe.

[@akuakana7364]

Thank you. Your video was very helpful

[@CodeWithArjun]

Glad it was helpful!

[@ahmedmoussa7519]

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

[@CodeWithArjun]

Awesome thank you! Be sure to subscribe.

[@braindead2237]

Brilliant Arjun!

[@CodeWithArjun]

Thank you so much.

[@melvintowo654]

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]

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

[@sonu4738]

thankyou you saved my day today
😊😊😊😊😊

[@CodeWithArjun]

Happy to help

[@patricknielsen1910]

Helped alot, thanks!

[@CodeWithArjun]

Glad to hear it! Be sure to subscribe.

[@vaanoliseithi]

all in one just 13 min your explanation great bro💔

[@CodeWithArjun]

Be sure to subscribe

[@mubashar-nouman]

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

[@giannisstamou3143]

thanks man nice tutorial!

[@CodeWithArjun]

Glad it helped!

[@felixfigueroa]

Thanks..! fast and perfect..!

[@CodeWithArjun]

Glad it worked for you

[@sqaSimplified]

Thank You.

[@suryadeepan9296]

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

[@CodeWithArjun]

Sure I will upload in future

[@CodeWithArjun]

Don't forget to subscribe

[@princeyohannan2979]

ruclips.net/video/d0NrTG2yhiw/видео.html

[@airahjanetano7711]

THANK YOU SO MUCH!!

[@CodeWithArjun]

You're welcome!

[@momentswithdave6216]

Thanks for this tutorial

[@CodeWithArjun]

Welcome, Please don't forget to subscribe.

[@jeffreybandojo2458]

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

[@CodeWithArjun]

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

[@syawadhilahpradipta828]

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?

[@harmanmuhammad3696]

well done man!!

[@CodeWithArjun]

Thank you Be sure to subscribe.

[@mhmdnzr]

that's the best tutorial!!!!

[@CodeWithArjun]

Be sure to subscribe.

[@sherhanan1219]

outstanding explanation

[@CodeWithArjun]

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

[@user-uk8ny3xf2s]

The best
Thank U
:)

[@CodeWithArjun]

Glad you liked it.

[@when_life_gives_you_limes]

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

[@CodeWithArjun]

Haha okay.

[@gilbertorogel81]

very useful thanks

[@CodeWithArjun]

Welcome, Glad you liked it.

[@douglasrichardson5721]

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]

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

[@princeyohannan2979]

ruclips.net/video/d0NrTG2yhiw/видео.html

[@ciclopentanoperhidrofenant8341]

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

[@luismarquez6653]

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]

I have other video for navbar check on my channel.

[@swiszkiOj]

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

[@Ssunnayy]

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

[@kimonjeter6536]

good job👏

[@Micha-ig6ic]

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

[@AloneDevotee]

It is useful

[@CodeWithArjun]

Glad you think so!

[@taurius159]

Everytime "let me" is said drink 1 shot

[@mohanlanke2945]

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

[@CodeWithArjun]

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

[@jastriarahmat659]

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

[@CodeWithArjun]

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

[@syawadhilahpradipta828]

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]

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

[@bbbzbdbsns]

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

[@CodeWithArjun]

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

[@omaraly3296]

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

[@CodeWithArjun]

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

[@pejuagsuksss]

thank you arjun

[@CodeWithArjun]

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

[@pejuagsuksss]

@@CodeWithArjun i will try later arjun

[@pejuagsuksss]

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

[@CodeWithArjun]

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

[@pejuagsuksss]

@@CodeWithArjun ok sir i will watch later

[@fionaodiogo2252]

how to you create links to the dropdown

[@vatsvlogs6110]

4:44 rcc isn't working in mine

[@kylekendall4220]

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

[@CodeWithArjun]

I will upload on that soon.

[@ashif-anoop8062]

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

[@ProjetoCloudcom]

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

[@syawadhilahpradipta828]

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

[@bbbzbdbsns]

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

[@bbbzbdbsns]

@@syawadhilahpradipta828found the solution

[@alperencan4939]

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

[@slamamustapha6093]

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

[@CodeWithArjun]

install react sniplets from the extension of vscode.

[@slamamustapha6093]

@@CodeWithArjun thank you 😍

[@sherhanan1219]

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

[@CodeWithArjun]

master basics and try to build some projects

[@princeyohannan2979]

ruclips.net/video/d0NrTG2yhiw/видео.html

[@imbeckimback]

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

[@CodeWithArjun]

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

[@kukkujerin9563]

where is the source code

[@CodeWithArjun]

Visit my github account arjungautam1

[@digender]

@@CodeWithArjun its not there you repo is empty

[@CodeWithArjun]

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