Creating Navbar and Routes | Complete React Course in Hindi #56
Вставка
- Опубліковано 1 лют 2025
- 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.codewithha...
►Facebook - / codewithharry
►Instagram - / codewithharry
Twitter - / haris_is_here
Comment "#HarryBhai" if you read this 😉😉
This comment is from 26-06-2022 for people who are getting errors while using routes try this it'll work like a charm
For those who are getting errors on this tutorial has been replaced by Routes
And to add element we have to use
instead of
thanks alot
@@manavdixit3355 thank you
whenever I write Navbar my compiler shows error and is not defined. why???
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.
Me bootstrap use kr rhi usme Nav.link nhi chal rh h
Apart from this amazing explanation,5:53 was good too.
for those who are facing issue on switch routes, replace switch with routes
I think there have been some updates as routes also do not work anymore!
@@singhm4709 , While doing the import , we should use `BrowserRouter as Router`, then it should work
yeah switch routes is now deprecated
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 (
);
}
Thanks bro it is still working in 2023
Main focus react h functionality absolutely right bro , guys don't waste your time learning css just learn react with functionality.... Thanks....
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
I think v6 of router dom doesn't support 'exact' anymore. Its added by default in v6
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
Really helpful,thanks a lot bro
alooo
UA-cam 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❤️
Code with harry, one request can you add english captions to all your videos it will be helpful to many of them who don't know hindi😢.
Happy teachers day Harry Bhaiya!! Your videos help us a lot. Thank you for your efforts.
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;
thankyou so much bhaiya 👏
Thanks Buddy
Thanks you brother👍
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 ❣
Wow 3 minutes mein 2 videos ?? R a sir ekhi toh dil hai kitni bar de doon aapko??💜❤❤❤
Best teacher ever on youtube... salute to your effort bro :)
for those having switch problem can try this :-
import {
BrowserRouter as Router,
Route,
Routes,
Link
} from "react-router-dom";
function App() {
return (
);
}
Thankyou bro
After thousand of effort your code is running thanks you brother 😢
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 ✨🙏
bro, pls tell how to resolve it, in detail
You are the best UA-camr
Hardworking, simple and genius thank you
Happy Teachers Day Harry Bhai 🔥
Happy teacher's day sirrrrrr
Jio aap hazaaro saal, saal ke din ho pachas hazaar!
Lots of loveee🧟
Happy Teachers Day Harry Sir ❤️
Thank you Harry Bhai Sach me bout maza aa rha hai iss course me.
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 👍
9:22 Aha Aha
Happy teachers day Harry bhai 💙
Happy teacher's day Harry Bhai
Absolutely sir, bootstrap is best for learning this. You keep going by this
Thanks for hardwork❤️❤️❤️
Great❤
6:05 tussi great ho paaaji
Best MERN stack course in the web.
4:18 I laughed hard when he said "Ïtna copy-paste marenge ki kisine sochi ni hogi"
Itne comments pdunga kisine sochi na hogi
Happy teachers day 🎂🍫🌹🙏
Happy teacher's day sir 🎉🙌
Happy teacher's day♥️
Happy teachers day Harry
This is awesome I have been waiting for .......
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
Thank you soo much buddy 😀
great sir
feeling well parry Harry Bhai :)
Present from IIMT College, greater Noida date:- 19-09-21 Full Sunday gride 🔥🔥🔥🔥🔥
Happy Teacher's Day Harry Bro
boom courses , thanks a lot
Harry brother please make an new incredible playlist about app development. ( Also beginning to advanced) 🥺 please
Happy teacher day mere guruji
Ab dil b de do yrr
Sir please make a video with react bootstrap and a full js in one video plsease
It would be really helpful
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
Happy teachers day harry Bhai
return (
);
Please make a video on python project for stock trading and analysis.🙏
turn on format on save setting in vscode
Happy Teachers Day ❣️❣️❣️❣️
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 (
);
}
Tha bootstrap ki party ho rhi hai is awesome
Thanks
Bhai starting se lekar ending tak sql par vedeo bano
for those who are struggling with blank screen :) replace your code fragment with this one --
return (
);
still not working. can you share your code
MySQL full course and git cheatsheet please 🙏🏻🥺.... btw happy teachers day!!❤️
Harry brother please make a video on multi level category menu (Drop down menu) with the help of react js.
Please.....🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻
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.
tmhari video dekh kar me pchta ri hun.. poora din lga dia is cheez me mgr akhir me new new qissam k error are he.. ab ye children wala error kaah se agya, kabhi switch wala. kabhi routes kro to msla .. poora din lg gya
co piliot free hai madam use kro codemiuim free extension hai use kro errors htao
react-router-dom@6.17.0, use this line in navigation instead of switch
Good luck
🔥🔥
Make sidebar also
5:59 Humara Yahan react ki party ho rhi hai!!! xd!!
npm uninstall react-router-dom
And installed version 5.2.0 of react-router-dom:
npm install react-router-dom@5.2.0
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;
7:47
4:20 harry bhai ke andar joginder a gaya 😂😂😂
4:17 thara bhai jogindar 🤣🤣😂😂
React js rock on
4:14 harry bhai joginder
Those who are getting probelem during routing pklease replae the switch as reeact in now days dont use switch inatead sue this syntax
4:14 tumhara bhai harry
which is better mui or react bootstrap?
7:13
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.
"localhost:5000" is your node server while port 3000 has react app running
Why switch does not work know in react-router-dom v6
Why you not use .jsx
How can I create a drop-down menu in navbar using react and react Router?
❤
undo karne se bhi wapis aa sackta tha index.html
4:15 Harry bhai Joginder 😂
My nav bar is not reflecting on page i installed react bootstrap also but still its not showing
bhai kia kia phir?
Harry bahi mai react router dom install krta hun ek alag package.json file ban jati hai folder k bahir
React router dom v6 pls
जब हम किसी वेब डेवलपर को कोई वेब प्रोजेक्ट देते है तब सेफ्टी और सेकुरिटी के लिए हम क्या क्या कर सकते है ताकि bahivshya में डावलोपर को कोई भी परेशानी न हो और owner को भी अपने busness चोरी होने या खोने या छीन जाने का डर न हो अपने प्रोडक्ट और आईडिया और सेक्रेट्स को लेकर।
अभी तक मुझे कोई वीडियो नही मिला है
bhai wo navbar ka css kaha se araha hai ?
Bootstrap se import kiya gya hai
im enjoying the party
Screen blank aa rha yr ky kre
2 video
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.
Link element must be inside a Router element
eg:-
hi
Home
haha .. coming from another channel > where they write just markups and think their tutorial is on React js.
"Yahan hm React seekhein ge"
//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;
9:18 lol
Arre thumbnail ni lagaya bhaib
Harry bhaiya aap free fire khelte hain kya
Itna copy paste karenge kisine Sochi na hogi 😂
Please make thumbnail attractive
Your thumbnail is very bad
Please sir make it perfect for attracting people
@codewithharry
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