React Router Hooks and Links | React JS Beginner Project

[@DaveGrayTeachesCode]

React Router is capable of more than just routing users to different components. React Router also has a special way of handling links instead of using anchor tags with an href attribute as you would with HTML. In addition, React Router comes with custom hooks that allow you to access the browser history and pull parameters from URLs to help you deliver dynamic content from your React applications. If you are just starting with React, I recommend starting at the beginning of this Learn React tutorial series playlist here: kzbin.info/aero/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp

[@6figureSidehustler]

Most concise teaching of react that I’ve came across on KZbin in the last 4 years

[@DaveGrayTeachesCode]

Thank you for the kind words, Jermaine! 🙏🙏

[@MyBaBB]

Another fine lesson from Dave Gray, Simple and to point. Thanks Again Dave !

[@tulsidhameja5492]

Your tutorials greater than paid content .thanks 🙏

[@franalcaraz1676]

Really great series to cover React basics. As I am learning React at a more profound level, I am understanding how amazing Next.js is.

[@jesuswalks1101]

We look forward to continuing!

[@DaveGrayTeachesCode]

Happy to hear it! More to come! 🚀🙏

[@World_information5568]

Beat teacher with best react series 😊♥️♥️♥️♥️

[@DaveGrayTeachesCode]

Thank you for the kind words 🙏💯

[@harag9]

Just a comment to help out the site - Great tutorial and I really like your teaching style, nice and slow and I can type along with you, sometimes spotting the issues and solving them. It's great to see you leave all the debugging in the video and the solutions though :) Great work, keep it up!

[@DaveGrayTeachesCode]

Thank you!

[@computerscience1152]

I love learn react tutorials

[@DaveGrayTeachesCode]

Thanks! 🙏

[@ahmad-murery]

Nice project and I already excited about the new features you're going to add, In postPage and according to JS operator precedence we should be able to do this: instead of writing {post && ... } {!post && ... } we can do it in one block {post && ... || ... } Thanks Dave,

[@DaveGrayTeachesCode]

Great comment and suggestion Ahmad. This makes logical sense and I am often overly deliberate when coding to explain procedures. That said, you will find this suggested change creates a no-mixed-operators warning from react-dev-tools.

[@ahmad-murery]

@@DaveGrayTeachesCode Thanks for mentioning the warning, I didn't notice it as I just did a few basic tests. anyways, the way you did is more clear and easy to catch but I couldn't resist using the logical operators to make some shortcuts 😎😁 (didn't expect to get a warning)

[@vipul_chauhan9384]

Pretty nice Tutorial!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@abdulrahmanagboolaosho3582]

I am making my first react project so I am revisiting some of the lessons maybe someday I will become a greate developer like you

[@DaveGrayTeachesCode]

You can do it! 💯

[@dimitriss3635]

Awesome tutorial sir, I was only wondering , why are we passing the usestate hook to each component instead of calling them inside the component?

[@DaveGrayTeachesCode]

Keep going in the series. The state will be broken into global and component only requirements. I started this way for beginners to learn about passing props to other components.

[@dimitriss3635]

@@DaveGrayTeachesCode ok thank you Dave, keep up the amazing job, this series is very fun to watch

[@alejandolucas4540]

Excellent content! 100% Recommended

[@DaveGrayTeachesCode]

Thank you, Alejando!

[@fernandosalas4885]

Wow I learn a lot from you man. Thanks

[@DaveGrayTeachesCode]

You're welcome!

[@alisabir2440]

who ever trying to access this in 2024 router writing methods are changed look for logic in this video but make sure your syntax is up to date ;)

[@beans923]

Thank you for your tutorials, Dave! Your teaching is very clear and easy to follow. I am wondering about HTML fragments, which you utilize around 12:55. What is the advantage of using those over a standard div?

[@DaveGrayTeachesCode]

Thank you! Great question, too. React requires a parent and fragments are a common way of providing that when an element is not needed. Even with HTML, I stay away from divs until they are really necessary. 🚀

[@AdityaDey424]

At 7:06 , if "Link to" is not working then uninstall react-router-dom & re install it of version 5.3.3

[@DaveGrayTeachesCode]

Updated RRv6 tutorial here: kzbin.info/www/bejne/jnO1fYmIn79mebM

[@AdityaDey424]

@@DaveGrayTeachesCode Started this series from first video and will complete further. This comment will be helpful for those students who are following this series from scratch like me 😀. Thank you for sharing the video link & this series is more then a paid course.

[@rangabharath4253]

Awesome as always 👍😀

[@DaveGrayTeachesCode]

Thank you for the support! 🙏

[@alaaddinugurcatal2870]

It was really good tutorial thanks so much! it helps a lot.

[@DaveGrayTeachesCode]

Glad it helped!

[@JJ-ot3ps]

hey dave! great video, pls teach how to create a flyout menu and link to other pages in the menu in a typical ecommerce site?

[@DaveGrayTeachesCode]

Thank you! You could achieve this with CSS and I show some menu skills in my CSS course here: kzbin.info/www/bejne/pGW1Y3hthJKBndE

[@danielolamide114]

Thank you so much!!

[@DaveGrayTeachesCode]

You're welcome! The update to RRv6 is available here, too: kzbin.info/www/bejne/jnO1fYmIn79mebM

[@aya2222]

Thank you for great tutorial!! I have a question. Around 20:00 , on PostPage, I just played around with it and found if I comment out "post &&" and just leave only JSX parts like below, and directly type url like "localhost:3000/post/2", it returns error, doesn't render anything. Why is that? "post &&" is just a condition, so If there is 'post', it should show post even if we don't have "post &&" . return ( {post.title} {post.datetime} {post.body} Edit Post handleDelete(post.id)}> Delete Post )

[@DaveGrayTeachesCode]

React components often render more than once. For the first render, post is likely undefined so we must check if it exists first with post && ...or we will get an error when we try to access properties that also do not exist.

[@aya2222]

@@DaveGrayTeachesCodeI got it!! Thank you!!

[@Clash-Roblox]

I can't resolve why the error message: export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'. Please help! I tried to ask on google but still not be able to solve the problem. my react-router-dom version 6.15.0

[@Clash-Roblox]

Finally I have resolved it by remove the current react-router-dom version and re-install node-module and set react-router-dom to old version 5.1, so it does support Switch keyword

[@DaveGrayTeachesCode]

I believe I linked to my React Router v6 update in the description of this video if you want to use a new version.

[@nurlanshukurov3864]

26:00 is it okay to use useNavigate instead of useHistory?

[@DaveGrayTeachesCode]

Yes, please see my React Router update video: kzbin.info/www/bejne/jnO1fYmIn79mebM

[@nurlanshukurov3864]

@@DaveGrayTeachesCode thanks, you're an amazing teacher

[@sakibcoder]

Im almost about to finish this tutorial playlist😌✅✅Thanks for amazing tutorial for react-router-dom v6 user: useHistry is replaced by useNavigate history.push('/') to history('/')

[@DaveGrayTeachesCode]

Good job! I have a React Router V6 update video 💯

[@mahbubulislamatik873]

You are the BEST

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@iramimran3117]

Hello Dave! your tutorials are perfect and very helpful for me. Dave In your Router tutorial I am unable to map data from App.js to Fedd.js to display post on the home Page despite of using your code as it is. May I send you all these files, Can you tell me please where am I doing wrong or is it any other issue?

[@DaveGrayTeachesCode]

Hi Iram, you can check your code against my source code that can be downloaded from the course resources on GitHub. (link in description) There should also be a link to my update for this tutorial with React Router v6 which I'm guessing is the issue. You can check your package.json to see which version you are using, but RRv6 is very different from RRv5.

[@iramimran3117]

@@DaveGrayTeachesCode ok really glad to receive your response I recheck it again,It's working in your code template but not working on my react app,after updating router I give you feedback within two days. Thank you again Dave

[@prasannapm3220]

Nice!

[@immortalaigs4203]

I've spent this tutorial approximately 3 hours and still getting error sh*t. I could not handle Missingpage. i'm getting this in console [ 1)The above error occurred in the component: 2)Cannot read properties of undefined (reading 'pathname') ]

[@DaveGrayTeachesCode]

Very difficult for me to debug your code from here. Please note that React Router v6 is now available and I have posted an update in the course resources. You can also download my source code and compare to yours. I know you'll get it going!

[@netsofttechnology4840]

❤❤❤❤

[@bnmbnm7278]

Thank you for your suggestion, I just tried to npm start your code, only to find that I accidentally wrote the className in the h1 tag in header.js

[@DaveGrayTeachesCode]

I cannot guess what may be different in your code. My best advice is to compare to mine for differences.