Create React NAVBAR / MENU using React Router in ReactJS in Hindi in 2020 #57

[@roshangupta5803]

in React Router Dom 6 and above
Default active class
By default, an active class is added to a component when it is active so you can use CSS to style it.

#sidebar a.active {
color: red;
}

[@AdityaG.]

Thanks alot!

[@brandyFromYT]

Yahi video ka to wait thaa💓Dil ki baat sun liye sir

[@ThapaTechnical]

Thnku Bro 😀

[@kajolghoshkkg5512]

can't tell you how much you are helping the new learner with every details as a beginner.. love your video lectures.. and you know what is the most amazing fact even if i am doing a paid course but not every details is delivered as you described. thanks a lot from my heart.

[@techhelper9054]

Have u written source code

[@stiphenrobert4469]

Thanks sir... Yeh vdo maine ek sal pehle apki channel me dekh liya tha

[@ThapaTechnical]

Nice..

[@SalimKhan-tv8yo]

The way of step by step is really appreciated thanks a lot

[@Miles-co5xm]

better than most of react courses , and plus in hindi , waahhhhhh , maaja aagaya

[@techhelper9054]

Have u written source code

[@Miles-co5xm]

@@techhelper9054 kis chizz ka?

[@techhelper9054]

@@Miles-co5xm are bhai react js ke lectures ka

[@Miles-co5xm]

@@techhelper9054 na bhai

[@techhelper9054]

@@Miles-co5xm then how u revise..means how u remember all those things

[@swatishambhavi3649]

You're doing a great job, Sir. Thanks a lot.
You're explaining the "why" behind every concept which is great. Thanks

[@techhelper9054]

Have u written source code

[@vaibhavisheth5701]

Thank you Thapa I am the beginner in React JS and your Video help me a lot..... You are doing great job.

[@techhelper9054]

Have u written source code

[@simranbanwait]

kya mast padhate ho yaar tum , bohot badhiya guru , lage raho . 1m subs soon

[@techhelper9054]

Have u written source code

[@rallisfacts3988]

Coding best teacher codewithharry

[@ahmadasghar3410]

Thanks bruh your videos help me a lot, very fine teaching skill step by step i know it consumes lot of your time but thanks again keep it up!

[@techhelper9054]

Have u written source code

[@navneet8638]

Hi sir, Can you please explain me why you have written a.active_class in index.css

[@rajkumardongre3085]

for those who can't see the changes made by activeClassName, actually The NavLink API changed a bit in RRDv6, there is no longer an activeClassName prop.
you can convert from this :
Contact Us
to This :
{
return isActive ? 'active_class' : '';
}}
to='/contact'
>
Contact Us
I hope this might help you

[@VandanaSharma-ec6zl]

thank you so much but how did you come to know about this?

[@rajkumardongre3085]

@@VandanaSharma-ec6zl Welcome, you can refer to this beautiful article on react router V6, for further exploration
i hope this will help you

[@VandanaSharma-ec6zl]

@@rajkumardongre3085 sure thank you.

[@EWorldHub]

Superb Awesome 😈✌️💥💎🇮🇳🔥

[@muhammadhaseebsalman8859]

Making component files capital is not a must it can work with lowercase too

[@muhammadhaseebsalman8859]

only the component your exporting has to be capital

[@asifsayyad5289]

thanku bhai you are great , your way of teaching was very nice loved it

[@techhelper9054]

Have u written source code

[@mrityunjaymishra3857]

This video is second time in your playlist

[@CricketLoversSagheer]

thank u bro you made me my day Happy...

[@techhelper9054]

Have u written source code

[@jashanpreet832]

From 1 st to this video i watch all in last 16 hours and that's very interesting

[@techhelper9054]

Have u written source code

[@mdabuabdullah1282]

Really Awesome. Respect from Bangladesh

[@techhelper9054]

Have u written source code

[@AshishKumar-cx4uv]

One way to fix the “‘Switch’ is not exported from ‘react-router-dom'” error is to replace with

[@rajatadhikari1879]

wuhuu

[@umarzeeshan1154]

One way to fix the “‘Switch’ is not exported from ‘react-router-dom'” error is to replace with
Thanks and Absolutly help full

[@azizulhakimashik1154]

Best tutorial in React :)

[@arjunzundala8247]

Ek Badhiya si series Android Pe bhi bana dijiye bro....Aur agar ek serch banane ke liye jo algorithm use hote hai uske basic sikhayenge to badhiya rahenga....

[@akhilpathania2956]

Best channel !! Thanks alot!

[@chirag5628]

Amazing yaar. 💜💜

[@divishasinha2526]

how text-decoration property added in navlink elements. please explain. as per my thought it should applied on only a tag.

[@anmolsingh4969]

Then use a tag in navlink component

[@khan.hassan]

link work as anchor simply use
a.active_class {
text-decoration: none;
}

[@yashdongre1752]

If it works like anchor then we know anchor is a tag so y cant we simple write a {
//css
}

[@amitpaple]

Thank you bro 😊

[@techhelper9054]

Have u written source code

[@VrlHtzz]

Brother please make a video on dynamic routing

[@deadpoolzrx5235]

Bro make a toturial series on ionic5 plz 🙏🙏

[@navdeeprathor4212]

Hello sir I try this.
When I clicked link tag url was changed but component not view. I have view only home component how to solve this problem

[@cat4you218]

Do you get solution

[@TheShekar2012]

Capital hona hi chaiye Main nahi jaanta capital hona hi chaiye 😀😀😀👍👍

[@NoorUlAin-ks8qm]

why you made jsx files and not js? what will be the difference if we make js ?

[@kshitiz6343]

Please make a video on 'react-hook-form' module.

[@abhijitmondal3608]

Bro Please i am following u from the beginning.So after react please make us learn about react native.

[@crazyproton350]

Bhai app apni morden website ko responsive bana na sikhao please🙏🙏🙏

[@rahulvirat7859]

Best teacher ❤️

[@bhautikpatel4742]

sir mai 1000 bar like bhejna chahta hu but youtube ko bolo facility de
Very very THANKS Sir

[@nontechbg]

React-router-dom@6 not support switch and more many things like activeclassname

[@Abhishek-bo9ge]

what is the deference between " .jsx " file and " .js " file

[@nitroo7375]

js is for java script, jsx is for react basically. If you are using VS code, .jsx and .js are considered same. We can use javascript in .html files using script tag. And on the other hand, React is a combination of javascript and html. So it is considered same. Hope it helps

[@ashiskanu7101]

Boom guys 🎉🎉

[@puneet4419]

you are great sir

[@shivamsingh-uz7zp]

in css why a.activeclass{ } i did not get it.

[@iamsarojb]

Please make a video on how to make navbar for desktop view with ionic react

[@chiraggupta9547]

Aapne Css file Mai jab CSS add Kari active Ki toh usme a.active_class Kyu likha

[@jagwindersingh836]

Main bhi yahi soch raha hu

[@nitroo7375]

@@jagwindersingh836 Isiliye likha because a tag and Navlink tag link ke liye hi use hote hai na tabhi. for ex :
Home and...
Home
So to style the a tag or NavLink tag, we use a.{className} {
furthor stylings
}
a.{className} tells css file that this class is connected to the any link tag.
Hope it helps.

[@manilavaswani154]

@@nitroo7375 but I am using the same code for styling the link i.e a.active_class and it is not working for me what should I do?☹️

[@nitroo7375]

@@manilavaswani154 apne css file link kari hai?

[@rupali_baranwal]

@@nitroo7375 but it is not working

[@shubhamsuri7710]

Hi Vinod, How can we make dropdown menus in react

[@VrlHtzz]

Do you got the solution?

[@VrlHtzz]

@LOVEDEEP Singh yup but we can't use Link or anchor tag in that

[@AnasandAmmar]

Firebase and react tutorial plz....

[@samsuddinmia4982]

Sir plz make a video on latest version of react js and changes on react js like switch and router and many more plz sir make video

[@adityadev2825]

Awesome 👍💯

[@steelado3433]

nice

[@rajbannasa7662]

thank you so much sir

[@NeerajSingh-ch7wl]

make a video on sidebar menu with hamburger menu...

[@mr.shoaibmalik2488]

THANK YOU SO MUCH SIR

[@techhelper9054]

Have u written source code

[@Dream_Rider_Abhijit]

please work with bootstrap

[@samqureshi9415]

So my question is how many % react is done ?

[@gowtamkumar17]

broo.. need help. can you create dynamic navbar react turorial?? please

[@medipakpagare]

great work

[@imrankazi658]

Sir Electronjs par tutorial banawo please

[@Mr1990rahulkumar]

How can I create a dropdown in this navbar? I tried but getting errors

[@nicetomeetugaming7024]

Thanks a ton man!

[@techhelper9054]

Have u written source code

[@sanashaikh5825]

activeClassName and exact attributes is not workings how to fix this?

[@AZ-vu7sb]

sir i waiting Full Website using React

[@priyakapte1808]

In react, we are using a Link rather than anchor tag

[@wajahatalikhan6457]

Bhai useReducer par bhi bana do video

[@harshwadhwani7050]

sir make more videos on Landing Page using HTML and CSS please 🙏🙏

[@ranjanbastia9706]

Thank You sir

[@gurinderpartapsingh8694]

Hlo sir...sir plse make a playlist on SEO...how we can optimize our website to the Google first page....and first rank....???plse sir that thing is important in web development...

[@namanverma4818]

vehla baitha oh tere gal suna

[@bnodonprojukt2124]

video number 61 & 62 from react playlist are the same video.

[@ijazDeveloper786]

sir apny css ki file a.active_class q use kiya ha a tag to humnay use he ni kiya

[@shainkeyasati3888]

index.js m import kia h

[@Hermioneswand1]

Thank you so much!! :)

[@techhelper9054]

Have u written source code

[@mumbaibhaijaan]

Sir ek proper responsive navbar btao in react

[@DreamMaster16]

sir export switch krke error arha hai kuch pls hellp kro

[@DragonSuplex]

THANKS

[@abhisheksinha351]

How can I create drop-down menu in navbar using react and react Router? Can you plz make a video on this

[@preazago2511]

Sir polling system bnao ajax with php SQL . Create poll and show result.

[@user-zp1dv4yh5e]

Bro ,can you cover Material Ui along with React !

[@DeepakKumar-nd5be]

He already cover the material ui please check his previous react video

[@areebahmad3153]

Bhai aapne ye video do baar add kardi hai react ki playlist me, Please remove that. I love your videos.

[@creativeakshara8438]

Great Menu💗
Sir please snake game bana do pure javascript me please or canvas ki playlist bhi bana do please 🙏🙏

[@rohitchaudhari3589]

great sir

[@itonlinesolutiona7745]

Navlink after active underline problem

[@abdullahanwar8064]

Sir your videos was 100 plus but its 63 where other videos

[@sudarshanbarage3926]

why not u use Class components while making video.. till now i can see only Functional Components. .. any specific reason

[@kishanlalchoudhary2765]

How to use php in reactjs

[@satishksharma]

In my case home (root) link always show active even after using exact. So provide the solution of this problem.

[@zainulkhan8381]

you have to use exact keyword in every Link tag hope your problem will be resolved

[@w3gyan]

Love it Bro

[@GurankitSinghBehal]

9:45

[@nehajain7720]

How to pass parameters via router?

[@ranisinha2999]

Command for install react router dom?

[@prasadparadkar8750]

npm install --save react-router-dom

[@mamitadas2584]

I am trying to make a website by my own I want to contact you regarding some queries regarding that cn I????

[@ashutoshranjan5098]

😍😍😍😍😍😍😍😍

[@techreview588]

BOom 🥵 awesome🔥

[@SohailKhan-on3fz]

Hi Vinod, you have added the same video two times please remove from playlist the same video.

[@anjumjahan3672]

sir plzz tell how to get source code

[@MANPREETSINGH-ft9hd]

Thank u

[@bhakuninavneet3906]

Thanku sir

[@aniketpaul321]

Same video

[@crazyproton350]

#firstviewer

[@sportscity5487]

Error: Target container is not a DOM element. giving Error

[@nitroo7375]

Because is target not Target

[@robinacharya9980]

This Video is twice so please delete it from this playlist.
BTW thanks sir you are doing great.

[@greenshaheen]

Landing page bnana sikhao react se

[@DEEPANSHU_NAG]

👏🏻✌🏻👍🏻🙏🏻💯