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!
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!
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.
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
Great video bud. Really nailed the params of an exercise I am working on for a bootcamp with only a little bit of adjustment. Subbed today so look forward to see what you release in the future!
Thanks a lot. after watcing your amazing learning video, i am able to resolve problem related to React Router. once again, Thanks a lot..........................
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
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
Thank you for show-casing this as we can now use this to create an amazing display system perhaps you could make it more of a hamburger menu! Thank you!
Thanks Chief, I have been struggling to find the reason why i'm getting a blank white page for two weeks now and i just found out i didn't add the BrowserRouter into the index.tsx root render function
Thank you great video. Your a machine! Appreciate the information Even Your hair is even doing 100 km/hr. Mine does 30 km/hr like a kids school zone! Just like my coding skills.
Kyle, I have a problem. I am hosting my website with firebase the navbar works awesome but if I try to write the url it sends me to the 404 page. How I can make it when I write a url with the page to load automaticaly??
How would you organize a multi page react app? I've seen you've separated the pages in a folder. What about components of these pages? CSS and all the good stuff?
This is a great video and tutorial! However, is a way where you can transfer data between these pages like if someone clicks a link on your pricing screen it brings it to a new screen to pay with the payment plan selected
npm i react-router-dom installed an additional package-lock.json and package.json. I suspect this course needs an update for 2023? At this point it killed my app and I couldn't continue.
What do you mean by active state? What are the differences when you implement it so that it is in such a state compared to the previous routing implementation without react router?
Hello! thank you for this tutorial but I have one problem, when I add tasks on my first nav (todotask) and then I go to my second nav (timer) and then I go back to the first nav, it will reloaded and the added task is gone. can you help me what can i do to fix this? thank you!
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.
Breaking down tutorials in components this way is the way to go.
Thank you so much for this.
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!
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.
short, simple and straight to the point. its 2024... Still very useful and relevant... thanks for breaking this down to the simplest...
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!
Hey, I just found out about NavLink. What do you think its usecases?
@@cookiemachine obviously nav bar items :D
I was about to say the same thing
activeClassName was deprecated in react-router-dom v.6
@@dave6012 you use an inline function passed as value of a prop instead
Thanks Kyle! I was working on my Company's official page and this video saved my day!
I don't know if you know this, but your content saves lives.
Thank you so much!
The final part of your tutorial saved me from a big problem, thanks, you taught me so much!
Thank You so much, was trying different docs and couldn't make it work, Finally found your video and made it done
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.
I am a beginner for using react. Your explanation helps me a lot.
Thank you, i adjusted my own html and css code into this, and it works well!
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
Thanks!
Thank you for the support!
If you only knew how I struggled with this today? 😭 Thank you sm❤
actual goat video only making this comment to help u in the algorithm cause u deserve it
Thank you! These videos really help out, keep up the great work!
Easy to follow along, and I like you show how to route with and without react-router-dom. Thanks for the tutorial.
Hey Kyle, thanks for making this. I've come across your channel over the last couple of weeks and finding if really useful! Brilliant.
Thank you brother, router was doing my head in.
Thankyou so much i was stuck on this for hours 😭😭
I'm a fan of the teaching style :D
Great video bud. Really nailed the params of an exercise I am working on for a bootcamp with only a little bit of adjustment. Subbed today so look forward to see what you release in the future!
Thank You VERY VERY much. Great explanation. U are a gifted teacher and thanks one more time
You are amazing! Thanks for simplifying web dev in such a clear way!
A few more that kind of video and i'll fall in love with React)
ty for simplifying the web for me
Bro Thanks a lot this is what I've been looking for.
Thank you, I have learned a lot of things from today's video. Good luck with your work.
Thanks a lot. after watcing your amazing learning video, i am able to resolve problem related to React Router.
once again, Thanks a lot..........................
Excellent tutorial, helped a lot with my react website nav bar menu.
You are really helping me with react !
Finally, I've been waiting for a new video to come. What time do you post videos? (2d, 5d, 1w or something else)
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
This came at the right time! Thanks buddy!
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
I'm sure he knows that, but you can't give away too many trade secrets in a free video.
Keep up the great work!!
Thank you so much for the video. It really helped me with my assingment.
I think we can use NavLink instead of Link for active state
easy and great as always , Thank you !
Thankyou so much you made my day sir
Works, thanks!
You're the GOAT 🙌🏽
Thank you so much for your video it helped me out alot.
Thank you so much, it was exactly what I was looking for. What a great tutorial!
Good job!
you are a legend! Thanks!
Thank you for sharing your knowledge
Thank you for show-casing this as we can now use this to create an amazing display system perhaps you could make it more of a hamburger menu! Thank you!
Thanks, I love your angel hair. Keep it up !
This saved me!! thank you
18:05 can someone explain why doing this is necessary... if your website only has a few tabs
Thanks for this knowledge!
Thanks Chief, I have been struggling to find the reason why i'm getting a blank white page for two weeks now and i just found out i didn't add the BrowserRouter into the index.tsx root render function
Nice work ✌️
Hi, can you make a video of vanilla js routing? great videos!
Excellent vid, really clear and help[ed me fix a problem that I'd been battling with all day :-)
Thank you great video. Your a machine! Appreciate the information
Even Your hair is even doing 100 km/hr.
Mine does 30 km/hr like a kids school zone! Just like my coding skills.
ERROR in [eslint]
src/NavBar.js
Line 25:24: 'path' is not defined no-undef
Hello, what does this mean?
^ That is line 25
crazy good video !
Interesting how you have the same ideas I have, like organizing the components the router references as "pages".
Thanks a lot for this tutorial
please make more videos on React
Great tutorial
05:00 can anyone clear this concept? Why active class have to go above hover for it to work?
Kyle, I have a problem. I am hosting my website with firebase the navbar works awesome but if I try to write the url it sends me to the 404 page. How I can make it when I write a url with the page to load automaticaly??
How would you organize a multi page react app? I've seen you've separated the pages in a folder. What about components of these pages? CSS and all the good stuff?
Hi I don't know if you're listening I am trying to create a navbar inside an exisiting react app are you able to assist ?
This is a great video and tutorial! However, is a way where you can transfer data between these pages like if someone clicks a link on your pricing screen it brings it to a new screen to pay with the payment plan selected
great job bro
npm i react-router-dom installed an additional package-lock.json and package.json. I suspect this course needs an update for 2023? At this point it killed my app and I couldn't continue.
Thanks Buddy
Thanks Kyle.
can you also use something like component={Home} when you write the routers?
Great 👍
I get most of this. The only only I’m confused about is why you put display flex in .navbar a
Omg thank you so much
Please make a video on nested routes
Many thanks!!!!!
how do you use this concept with a nav list from data? Am I supposed to know all of the links ahead of time to create routes?
Thanks kyle
Thank you big boss
thanks for the video baby
hello Kyle! Hope you are fine i wanted to ask that this code can be written in Notepad ++ ?
What if I don't want to show the nav in a specific page, like the login for example?
how react router is able to chagne the components without causing the page reaload ?
great video thx
It Very Easy ... Can't believe react is so easy ...
or it's your magic ...
who know !
Hello! I am new to React, I am creating a website with a pathname like: where I compare my state with my URL. Can this tutorial be helpful?
What do you mean by active state? What are the differences when you implement it so that it is in such a state compared to the previous routing implementation without react router?
Nevermind, I now understand it as allowing the active class concept.
Hello! thank you for this tutorial but I have one problem, when I add tasks on my first nav (todotask) and then I go to my second nav (timer) and then I go back to the first nav, it will reloaded and the added task is gone. can you help me what can i do to fix this? thank you!
In my case I have buttons I want to put in the header. Any ideas?
best practice react folder structure and state management sir
Thank you
Can you make a video about blazor?
how can I make this navigation bar stay at the top of the screen even though the user is scrolling down?
Could you make tutorial video on React unit testing ?
how does the mavbar re-render? when you click on the Link, and it's color changes
hey could you make a tutorial on firebase auth where we can block users from acessing other parts of site if they are not authenticated .... plz