Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

In this React Router v6 upgrade & refactor tutorial, you will learn about React Router v6 including how to upgrade from v5 while refactoring a React JS Blog project utilizing the new features of RRv6.

Subscribe https://bit.ly/3nGHmNn

React JS for Beginners full course - 9 hours: https://youtu.be/RVFAyFWO4go

Starter Source Code: https://github.com/gitdagray/learn_react_router

Refactored Source Code: https://github.com/gitdagray/react_router_v6

React Router v6 in 20 Minutes | RRv6 Upgrade & Refactor Tutorial

(00:00) Intro
(00:09) Welcome
(00:15) Look at the docs
(01:07) The Starter Project
(02:15) Installing React Router Version 6
(04:05) Updating the Index.js
(06:09) Updating the App.js imports
(06:39) useNavigate replaces useHistory
(07:26) Adding a Layout Component
(11:35) Adding Outlet index content
(13:40) Nested Routes
(16:13) Additional Routes
(17:04) Review of the Routing Structure
(18:29) Link and useParams
(20:20) Testing the Refactored Code

ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

References:
React Router: https://reactrouter.com/
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library)
React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location=

Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven

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

#react #router #v6