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.

python, C, C++, Java, JavaScript and Other Cheetsheets [++]:

►Learn in One Video[++]:

►Complete course [playlist]:

Follow Me On Social Media
Comment "#HarryBhai" if you read this 😉😉

[basudevprodhan]

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

[prashantadhikari]

for those who are facing issue on switch routes, replace switch with routes
<Routes>
<Route path="/" element={<Home />} />
<Route exact path="/about" element={<About />} />
</Routes>

[rohittewari]

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 (
<>
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/about" element={<About/>}></Route>
</Routes>
</BrowserRouter>
</>
);
}

export default App;

[KajalSingh-ifuu]

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

[codingkaro]

Careful guys you will get an error for switch used in routers
<Switch> is not valid in v6 of React-router-dom it is now <Routes> replace it and also import it
now the route format is changes sample given below:-
<Route exact path="/" element={<Home />} />
<Route exact path="/about" element={<About />} />

Thank you

[akashuday]

This comment is from 26-06-2022 for people who are getting errors while using routes try this it'll work like a charm
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Home />}/>
<Route path="/about" element={ <About />}/>
</Routes>
</Router>
</>

[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.

[anandkarna]

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

[amirever]

for those having switch problem can try this :-

import {
BrowserRouter as Router,
Route,
Routes,
Link
} from "react-router-dom";
function App() {
return (
<>
<Router>
<Navbar/>
<Home/>
<Routes>
<Route exact path="/" element=
{<Home/>}>
</Route>
<Route exact path="/about" element={<About/>}>
</Route>
</Routes>
</Router>
</>
);
}

[almahmud]

Youtube 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❤️

[MuhammadAdnan.]

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

[danishbukhari]

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 ❣

[FRXGFA]

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

[harikeshsingh]

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 ✨🙏

[ankitchopra]

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 👍

[jeeaspirant]

Happy teacher's day

Jio aap hazaaro saal, saal ke din ho pachas hazaar!

Lots of loveee🧟

[debabratabasak]

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

[Fightclub]

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

[swatimaurya]

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

[aakashsharma]

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