Creating Navbar and Routes | Complete React Course in Hindi #56

In this react course, we will see how to learn react using projects.
This is going to be a project-based course full of real-world react projects.
Make sure to access the playlist here (Important): • React Js Tutorials in ...
All the source code and other material will be uploaded on codewithharry.com as and when available!
►Checkout my English channel here: / @programmingwithharry
►Instagram: codewithharry
python, C, C++, Java, JavaScript and Other Cheetsheets [++]:
Playlist: • Coding CheatSheets 🧾 b...
►Learn in One Video[++]:
Python[15 Hr] - • Python Tutorial For Be...
Python Advance[3.5 Hr] - • Python Programming Cou...
Python[1 Hr] - • Learn Python In Hindi ...
Python[2 Hr] - • Python Tutorial In Hin...
Python[15 Min] - • 15 Minute Python Tutor...
JavaScript[1 Hr] - • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial...
php[1 Hr] - • Learn Php In One Video...
php[2.3 Hr] - • Php Tutorial for Begin...
php[Project]- • Login And Registration...
HTML[30 Min] - • HTML 5 Tutorial For Be...
CSS[8.5 Hr] - • CSS Tutorial In Hindi ...
CSS[1.4 Hr] - • CSS 3 Tutorial For Beg...
Wordpress[3.2 Hr] - • How To Make a WordPres...
Angular[2 Hr] - • Angular Tutorial in Hindi
Java[2.3 Hr] - • Java tutorial in hindi 🔥
Web Scraping[1 Hr] - • Web Scraping Tutorial ...
MongoDB[2 Hr] - • MongoDb Tutorial For B...
Numpy[1 Hr] - • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tu...
Linux[1 Hr] - • Linux Tutorial For Beg...
JQuery[1.1 Hr] - • jQuery Tutorial For Be...
Git and GitHub[1.1 Hr] - • Git & GitHub Tutorial ...
►Complete course [playlist]:
React - • React Js Tutorials in ...
Python- • Python Tutorials For A...
OOP Python- • Object Oriented Progra...
Java - • Java Tutorials For Beg...
JavaScript- • JavaScript Tutorials I...
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials I...
C++- • C++ Tutorials In Hindi
Git & GitHub- • Git and GitHub Tutoria...
Android Dev- • Android Development Tu...
Python GUI- • Python GUI: Tkinter Tu...
Web Development- • Web Development Tutori...
Python Django - • Python Django Tutorial...
Projects Using HTML, CSS & Javascript- • Projects Using HTML, C...
Data Structure and Algo - • Data Structures and Al...
Python Practice programs - • Python Practice Progra...
Basic Python Programs- • [Hindi] Basic Python P...
General Python Errors- • [Solved] General Pytho...
PHP chatroom- • Realtime PHP Chatroom ...
Follow Me On Social Media
►Website (created using Django Rest & Angular) - www.codewithharry.com
►Facebook - / codewithharry
►Instagram - / codewithharry
Twitter - / haris_is_here
Comment "#HarryBhai" if you read this 😉😉

[@basudevprodhan3111]

For those who are getting errors on this tutorial has been replaced by Routes

[@manavdixit3355]

And to add element we have to use
instead of

[@snehashah1253]

thanks alot

[@snehashah1253]

@@manavdixit3355 thank you

[@ishisachan5775]

whenever I write Navbar my compiler shows error and is not defined. why???

[@prashantadhikari5460]

for those who are facing issue on switch routes, replace switch with routes

[@singhm4709]

I think there have been some updates as routes also do not work anymore!

[@subhajit99motivation]

@@singhm4709 , While doing the import , we should use `BrowserRouter as Router`, then it should work

[@M_Hamza_]

yeah switch routes is now deprecated

[@Leora193]

This will work:
import {
BrowserRouter,
Link,
Route,
Routes,
} from "react-router-dom";
export default function App() {
return (







);
}
function Home() {
return (

Welcome!

Check out the blog or the{" "}
users section


);
}
function BlogApp() {
return (




);
}
function UserApp() {
return (



);
}

[@SurajGupta-nv4kd]

Thanks bro it is still working in 2023

[@KajalSingh-if4uu]

Happy teachers day Harry Bhaiya!! Your videos help us a lot. Thank you for your efforts.

[@SUPRABOYZ]

For those who are getting errors while using switch try this syntax:
import About from "./components/About";
import Home from "./components/Home";
import Navbar from "./components/Navbar";
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (









);
}
export default App;

[@ruru-dev07]

Thanks bro 😊

[@MuhammadAdnan2.0]

Main focus react h functionality absolutely right bro , guys don't waste your time learning css just learn react with functionality.... Thanks....

[@anandkarna3763]

Apart from this amazing explanation,5:53 was good too.

[@akashuday7107]

This comment is from 26-06-2022 for people who are getting errors while using routes try this it'll work like a charm

[@aakashsharma3801]

Best teacher ever on youtube... salute to your effort bro :)

[@rtadwq...------...----.]

I am really happy that you're using bootstrap.
Since our intention is to learn react js, ur saving our time by concentrating on react js.
Writing css code or tailwind code are just a waste of time.
Good job Harry go on.

[@pratikshabendre654]

Me bootstrap use kr rhi usme Nav.link nhi chal rh h

[@aymandin4912]

This is awesome I have been waiting for .......

[@Fightclub369]

You are the best RUclipsr
Hardworking, simple and genius thank you

[@user123p]

Thank you Harry Bhai Sach me bout maza aa rha hai iss course me.

[@debabratabasak6031]

Wow 3 minutes mein 2 videos ?? R a sir ekhi toh dil hai kitni bar de doon aapko??💜❤❤❤

[@swatimaurya9405]

Absolutely sir, bootstrap is best for learning this. You keep going by this

[@codingkaro3266]

Careful guys you will get an error for switch used in routers
is not valid in v6 of React-router-dom it is now replace it and also import it
now the route format is changes sample given below:-

Thank you

[@siddhantkumarsinha6183]

I think v6 of router dom doesn't support 'exact' anymore. Its added by default in v6

[@ishisachan5775]

whenever I type Navbar in App.js, my compiler shows error and says Navbar is not defined. why, navbar in my system is not not importing automatically

[@kushalsarda3435]

Really helpful,thanks a lot bro

[@gouravchaki7990]

alooo

[@eagle-tips-ff564]

Thanks for hardwork❤️❤️❤️

[@mateenmirani9493]

feeling well parry Harry Bhai :)

[@khushichaturkar7164]

Happy Teachers Day Harry Sir ❤️

[@tejaskumar4470]

Happy Teachers Day Harry Bhai 🔥

[@ankitchopra2334]

I had an issue, my react extension wasn't providing me with the snippets it used to provide earlier. Just switch to a previous version of the extension, it will work 👍

[@vigneshreddyjulakanti7583]

boom courses , thanks a lot

[@aymandin4912]

Happy teachers day Harry bhai 💙

[@jeeaspirant4670]

Happy teacher's day sirrrrrr
Jio aap hazaaro saal, saal ke din ho pachas hazaar!
Lots of loveee🧟

[@almahmud218]

RUclips mein agar mujhe top 5 channels ka naam bolne ko kahe, jinme full dedication ke saath coding sikhaya jata hai, unme sabse pehele apnka naam ayega sir ji. Mai ye hawa nehi de raha, sach bol raha hu❤️

[@rittwickbhabak7348]

Best MERN stack course in the web.

[@jaydeeprathod176]

Happy teacher's day sir 🎉🙌

[@mduty2304]

Harry brother please make an new incredible playlist about app development. ( Also beginning to advanced) 🥺 please

[@HamzaKhan-tj9mk]

great sir

[@krishjoshi5548]

Happy teachers day Harry

[@gourab_roy]

Happy teacher's day Harry Bhai

[@divyamagarwal4220]

Happy teachers day harry Bhai

[@abishanknayak7769]

Happy Teacher's Day Harry Bro

[@buddhasteachingsatishjadha4610]

Happy teachers day 🎂🍫🌹🙏

[@itacsWhatever]

Sir please make a video with react bootstrap and a full js in one video plsease
It would be really helpful

[@MrChauhanjaved]

Thanks

[@rohitshah8904]

Happy teacher's day♥️

[@k_a_r_t_i_k_g_a_n_d_h_i__]

which is better mui or react bootstrap?

[@krishnajoshi364]

Hi Harry, thank you so much for the amazing content. I had a question why is the app running on "localhost:3000" when we have previously changed it to port 5000? I am facing the same situation. On terminal it says app listening on "localhost:5000" but the changes are reflected on port 3000.

[@TheOrpita]

"localhost:5000" is your node server while port 3000 has react app running

[@FRXGFA]

4:18 I laughed hard when he said "Ïtna copy-paste marenge ki kisine sochi ni hogi"

[@itsMihir]

Itne comments pdunga kisine sochi na hogi

[@itsMihir]

Happy teacher day mere guruji
Ab dil b de do yrr

[@Motionmukul]

Tha bootstrap ki party ho rhi hai is awesome

[@dikshatiwari1255]

My nav bar is not reflecting on page i installed react bootstrap also but still its not showing

[@amir4ever148]

for those having switch problem can try this :-
import {
BrowserRouter as Router,
Route,
Routes,
Link
} from "react-router-dom";
function App() {
return (












);
}

[@vishalpanwar1303]

Thankyou bro

[@rajatchaurasia3578]

Present from IIMT College, greater Noida date:- 19-09-21 Full Sunday gride 🔥🔥🔥🔥🔥

[@abhisheksinha351]

How can I create a drop-down menu in navbar using react and react Router?

[@kali4844]

Please make a video on python project for stock trading and analysis.🙏

[@harikeshsingh93]

For all those who are getting error
Script is not exported from react router dom this is because of your react version , so for solving problem find syntax of your version else change react app version for terminal ..I hope it was helpful ✨🙏

[@gsmfurqan6509]

bro, pls tell how to resolve it, in detail

[@aryan7069_]

6:05 tussi great ho paaaji

[@itsmytechnology9285]

🔥🔥

[@user-vs8kk9di2j]

turn on format on save setting in vscode

[@danishbukhari6693]

ye hmara navbar he
ye hmari poori app.js he
ye hmara home he or ye react ki party ho rahi he was epic 😂😂😂😂
love you harry bhai ❣

[@RohanDasRD]

🔥🔥🔥🔥🔥

[@PakFreelancerhub]

Harry bahi mai react router dom install krta hun ek alag package.json file ban jati hai folder k bahir

[@_02shikhar_]

Happy Teachers Day ❣️❣️❣️❣️

[@pikachu-tw7fy]

React js rock on

[@harshshrivastava5931]

Why switch does not work know in react-router-dom v6

[@lakshya5946]

Why you not use .jsx

[@arkamukherjee3962]

5:59 Humara Yahan react ki party ho rhi hai!!! xd!!

[@RohitSingh-oh5tp]

Harry brother please make a video on multi level category menu (Drop down menu) with the help of react js.
Please.....🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻

[@SAMI--CSEB]

❤

[@MindRelaxSongs2]

Bhai starting se lekar ending tak sql par vedeo bano

[@surajdhungana407]

Make sidebar also

[@ehteshamali5471]

Good luck

[@ojaselawadhi4425]

MySQL full course and git cheatsheet please 🙏🏻🥺.... btw happy teachers day!!❤️

[@hakimfazal426]

im enjoying the party

[@vatsvlogs6110]

1:33 correct

[@nirbhaysethi1167]

I want to develop a multifunctional telegram bot with backend and database.
Can anyone guide me which Language and database should I learn for it with or any other suggestions.
I appreciate your help
Thank you

[@ADITYA-qr6il]

4:17 thara bhai jogindar 🤣🤣😂😂

[@mgmahi5]

Hello guys, I''m facing an issue in my code. Its saying "Error: Invariant failed: You should not use outside a ". Anyone having this issue? If yes plz reply.

[@manavdixit3355]

Link element must be inside a Router element
eg:-
hi
Home

[@24aman]

4:14 tumhara bhai harry

[@samirrobin3524]

For those who are v6.3.0 of react and getting errors in Switch, Link, Router do the following to solve the problem:
1. For Switch convert it into Routes,
2. Instead of npm i react-router-dom concurrently type npm i react-router-dom@6 concurrently

[@syedzakirhasan6353]

Thank you soo much buddy 😀

[@rabindrajaiswal5329]

bhai wo navbar ka css kaha se araha hai ?

[@hostile_user]

Bootstrap se import kiya gya hai

[@JamesBond-mc7kl]

React router dom v6 pls

[@harshvarmora5906]

4:15 Harry bhai Joginder 😂

[@usmanaliansari5223]

new UPDATE:-
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import NavBar from "./components/NavBar";
import Home from "./components/Home";
import About from "./components/About";
function App() {
return (



);
}

[@earningwithpassion7323]

Screen blank aa rha yr ky kre

[@omkardesai2439]

4:20 harry bhai ke andar joginder a gaya 😂😂😂

[@atulsingh7647]

7:47

[@simujatt905]

npm uninstall react-router-dom
And installed version 5.2.0 of react-router-dom:
npm install react-router-dom@5.2.0

[@inder7813]

undo karne se bhi wapis aa sackta tha index.html

[@amirasad760]

any one who get errors by using react-router-dom@6.17.0, add scriptin package.json file
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build" and save & run.

[@ehteshamali5471]

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

[@navadeepsatheesh6516]

4:14 harry bhai joginder

[@amirasad760]

react-router-dom@6.17.0, use this line in navigation instead of switch

[@user-me9vo2pf9r]

1

[@immortalityismydestiny]

2 video

[@sachindrapandey7146]

return (









);

[@notlethal]

9:18 lol

[@oklifecaredelhi4257]

जब हम किसी वेब डेवलपर को कोई वेब प्रोजेक्ट देते है तब सेफ्टी और सेकुरिटी के लिए हम क्या क्या कर सकते है ताकि bahivshya में डावलोपर को कोई भी परेशानी न हो और owner को भी अपने busness चोरी होने या खोने या छीन जाने का डर न हो अपने प्रोडक्ट और आईडिया और सेक्रेट्स को लेकर।
अभी तक मुझे कोई वीडियो नही मिला है

[@5minutestalk]

haha .. coming from another channel > where they write just markups and think their tutorial is on React js.
"Yahan hm React seekhein ge"

[@dheerajjangir4919]

Plz give a heart

[@vatsvlogs6110]

2:22😂😢😢😮😅😅🎉😂🎉🎉😢😮😅

[@SA___PANKTISHAH]

import './App.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from './components/Home';
import About from './components/About';
function App() {
return (









);
}
export default App;

[@birajanandapatra4195]

Itna copy paste karenge kisine Sochi na hogi 😂

[@aadityamohit8190]

Those who are getting probelem during routing pklease replae the switch as reeact in now days dont use switch inatead sue this syntax

[@MyOnlineSupportchannel]

for those who are struggling with blank screen :) replace your code fragment with this one --
return (









);

[@rohankumar9197]

still not working. can you share your code

[@ExpertTricks439]

Arre thumbnail ni lagaya bhaib

[@saqibnawab1083]

//New code for react router dom
import './App.css';
import {
BrowserRouter,
Routes,
Route,
Link,
Switch,
} from "react-router-dom";
import Navbar from './components/Navbar';
import Home from './components/Home';
import About from './components/About';
function App() {
return (




);
}
export default App;

[@gouravchaki7990]

aloo

[@arnav-aries9276]

Bro please heart dedo na please