React Router Hooks and Links | React JS Beginner Project

In this tutorial, we will apply React Router hooks and links as we complete the React JS beginner project we began in the first React Router tutorial. This tutorial is part of a Learn React series. The link to the full playlist is below.

🚀 This lesson is part of a Learn React tutorial series playlist:

After completing this tutorial, go to the refactor tutorial with React Router version 6:

React Router Hooks and Links | React JS Beginner Project

(00:00) Intro
(00:05) Welcome
(00:15) Quick Objectives
(00:58) Applying CSS to the project
(01:58) Header component
(02:46) Nav component and React Router Links
(07:13) Adding search state
(07:54) Adding post state and starter post data
(08:48) Adding search results state
(09:13) Passing props to Nav component
(09:36) Home component
(12:41) Feed component
(13:50) Post component
(17:54) PostPage component and useParams hook
(25:00) handleDelete function and useHistory hook
(27:10) NewPost component
(33:50) handleSubmit function and date-fns package
(39:16) Adding search functionality with useEffect and filter
(43:52) Correcting a handleSubmit function error
(44:56) Missing component / 404 page
(46:42) Footer component
(47:46) About component

🔗 React Router:

🔗 JSON-Server:

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:


📚 References:

✅ Follow Me:

Was this tutorial about React Router hooks and links helpful? If so, please share. Let me know your thoughts in the comments.

#react #router #hooks

[AdityaDey]

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

[mramirmohseni]

awesome tutorial. i think this video and syntax need to get updated as react-router-dom is changed in newer version. thanks

[abdulrahmanagboolaosho]

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

[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

[immortalaigs]

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 <Link> component:
2)Cannot read properties of undefined (reading 'pathname')
]