How To Create A Navbar In React With Routing

Navbars are one of the most common components you will create in React. Creating a good navbar also teaches core concepts about how React and routing work together which makes this the perfect beginner project. In this video I will show you how to implement a navbar with routing both from scratch and with React Router.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:48 - Navbar HTML
02:24 - Navbar CSS
05:55 - Routing without React router
12:30 - Routing with React router

#React #WDS #Navbar

[krishgarg]

Just for info: There is a NavLink component in react-router which will add "active" class if that link is currently active automatically. Saves some boilerplate code!

[smileself]

short, simple and straight to the point. its 2024... Still very useful and relevant... thanks for breaking this down to the simplest...

[NiaNic]

This is so great for portfolios! I was just considering moving my web portfolio from the old php mysql to react since I dont have much data to use for database anyway. Learning react, about routes and being able to update portfolio all at the same time with this vid thank you so much man!

[derf]

Without even watching the video, I already know this was EXACTLY what I was looking for today from you...weird how life works out like that.

[luthfijuang]

Thanks so much bro, you are helping me so much on my first project as an intern, keep going bro and i always will be your subscriber.

[ThourCS]

Breaking down tutorials in components this way is the way to go.
Thank you so much for this.

[MarcoCrupiPhotography]

The final part of your tutorial saved me from a big problem, thanks, you taught me so much!

[CrystalButterfly_Sadhanad]

I am a beginner for using react. Your explanation helps me a lot.

[sayyadtanzeem]

Thanks Kyle!! I have been stuck at react routing errors. My pages won't show on my home page but after watching your video. I got solution. Keep growing brother.

[athuljonnie]

Thanks Kyle! I was working on my Company's official page and this video saved my day!

[stainsmault]

Thank You so much, was trying different docs and couldn't make it work, Finally found your video and made it done

[Wampiroh]

I don't know if you know this, but your content saves lives.
Thank you so much!

[JeanDidier]

Searched this morning "AlpineJS router" and Kyle released this video 5 hours later 🤔. Thank you so much for the first router solution. I am amazed at how these things are so easy to you

[HumanAction]

Easy to follow along, and I like you show how to route with and without react-router-dom. Thanks for the tutorial.

[rajireddyaleti]

Hey Kyle, I'm a fan of yours. I like the way you make the content much simpler to understand.
Can you start some Javascript(React) tooling-related videos to make them more understandable? I don't know most of the things why we need some libs as dependencies and soon in a while in 2yrs to 3yrs they are deprecating/outdated

[looterbmgo]

Finally, I've been waiting for a new video to come. What time do you post videos? (2d, 5d, 1w or something else)

[ethiocode]

I think we can use NavLink instead of Link for active state

[SaliAalaNabiyak]

for the hook to get the current locatin you can just use one hook it is : useLocation()
it's gonna return an obj containing the pathname which we are looking for so the after importing the hook your code should look like this :
const location = useLocation()
let path = location.pathname

[ian_fraser]

Hey Kyle, thanks for making this. I've come across your channel over the last couple of weeks and finding if really useful! Brilliant.

[ayandandlovu]

If you only knew how I struggled with this today? 😭 Thank you sm❤