{"id":37731,"date":"2023-04-27T21:01:01","date_gmt":"2023-04-28T01:01:01","guid":{"rendered":""},"modified":"2023-04-27T21:01:01","modified_gmt":"2023-04-28T01:01:01","slug":"script-coding-react-router-6-ndash-full-course","status":"publish","type":"post","link":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/","title":{"rendered":"[#Script #Coding] React Router 6 &ndash; Full Course"},"content":{"rendered":"<div align=\"center\" style=\"padding: 2%;\"><iframe loading=\"lazy\" title=\"React Router 6 \u2013 Full Course\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/nDGA3km5He4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<blockquote style=\"text-align: left; background-color: #E4E4E4; border: 3px dotted gray; padding:2%;\"><p>\n<a href=\"https:\/\/www.youtube.com\/watch?v=nDGA3km5He4\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/p>\n<h3>React Router 6 &ndash; Full Course<\/h3>\n<p><\/a><\/p>\n<p>By <a href=\"https:\/\/www.youtube.com\/channel\/UC8butISFwT-Wl7EV0hUK0BQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><strong>freeCodeCamp.org<\/strong><\/a><br \/><strong>Published<\/strong>: Apr 24, 2023<\/p>\n<p><em style=\"font-family: 'Times New Roman',Times,serif; color: #666;\"><span style=\"font-size: 3.5em; font-weight: bold;\">&#0147;<\/span><\/em><br \/>\n<a href=\"https:\/\/www.youtube.com\/watch?v=nDGA3km5He4\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/i3.ytimg.com\/vi\/nDGA3km5He4\/hqdefault.jpg\" class=\"alignright\" align=\"right\" alt=\"freeCodeCamp.org\" style=\"width: 200px; height: auto;\" \/><\/a> This course will teach you to build real-world apps with React Router 6. Click here to get to the interactive version \u00f0\u0178\u2018\u2030 https:\/\/scrimba.com\/links\/react-router-6-course<\/p>\n<p>Throughout the course, you&rsquo;ll be building an app called &ldquo;VanLife&rdquo; &ndash; an Airbnb-style web app dedicated to renting out travel vans for your next big road trip!<\/p>\n<p>As you build &ldquo;VanLife&rdquo;, you will learn all the important parts of React Router, such as layout and index routes, nested routes, filtering results with search parameters, protecting routes for authenticated users, and more. You will also learn about the new Remix-inspired data router APIs, including Loaders and Actions.<\/p>\n<p>This course was created by Bob Ziroll, Scrimba&rsquo;s Head of Education.<br \/>\n\u00f0\u0178\u201d\u2014 Follow Bob on Twitter here: https:\/\/twitter.com\/bobziroll<br \/>\n\u00f0\u0178\u201d\u2014 Follow Scrimba on YouTube: https:\/\/www.youtube.com\/c\/Scrimba<\/p>\n<p>\u00e2\u00ad\u0090\u00ef\u00b8\u008f Get the code \u00e2\u00ad\u0090\u00ef\u00b8\u008f<br \/>\n\u00f0\u0178\u201d\u2014 Via the Scrimba course: https:\/\/scrimba.com\/links\/react-router-6-course<br \/>\n\u00f0\u0178\u201d\u2014 Via the GitHub repo: https:\/\/scrimba.com\/links\/react-router-course-github-repo<\/p>\n<p>\n\u00e2\u00ad\u0090\u00ef\u00b8\u008f Prerequisites \u00e2\u00ad\u0090\u00ef\u00b8\u008f<br \/>\nBefore taking this course, you should already be well versed in HTML, CSS, JavaScript, and React. <\/p>\n<p>\n\u00f0\u0178\u2019\u00ab Links mentioned in course:**<br \/>\n\u00f0\u0178\u201d\u2014 Scrimba&rsquo;s Learn React Course &#8211; https:\/\/scrimba.com\/learn\/learnreact<br \/>\n\u00f0\u0178\u201d\u2014 VanLife Figma Design &#8211; https:\/\/scrimba.com\/links\/figma-vanlife<br \/>\n\u00f0\u0178\u201d\u2014 Firebase &#8211; https:\/\/scrimba.com\/links\/firebase-homepage<br \/>\n\u00f0\u0178\u201d\u2014 Firestore Docs, get all docs in collection &#8211; https:\/\/scrimba.com\/links\/firestore-docs-get-all-docs-in-collectionfirestore-docs-get-all-docs-in-collection)<br \/>\n\u00f0\u0178\u201d\u2014 Netlify &#8211; https:\/\/scrimba.com\/links\/netlify-home-page<br \/>\n\u00f0\u0178\u201d\u2014 GitHub Desktop &#8211; https:\/\/desktop.github.com\/<br \/>\n\u00f0\u0178\u201d\u2014 Mirage JS &#8211; https:\/\/miragejs.com\/<br \/>\n\u00f0\u0178\u201d\u2014 Bob Ziroll&rsquo;s GitHub &#8211; https:\/\/twitter.com\/bobziroll<\/p>\n<p>Introduction to React Router 6<br \/>\nMulti-page vs single-page apps<br \/>\nReact Router Setup &amp; BrowserRouter<br \/>\nExtra: Local Development<br \/>\nRoutes<br \/>\nBrowserRouter &amp; Routes challenge<br \/>\nRoute, path, &amp; element<br \/>\nQuick Re-org<br \/>\nLink<br \/>\nVanLife project bootstrapping<br \/>\nInitial Deploy to Netlify<br \/>\nMirage JS Server<br \/>\nChallenge: Vans Page <br \/>\nRoute Params <br \/>\nNested Routes Intro<br \/>\nFixing the Navbar with a Layout Route<br \/>\nBootstrap the Host pages<br \/>\nNesting the \/host routes<br \/>\nCreating the Host Layout<br \/>\nRelative Paths<br \/>\nIndex Routes<br \/>\nTo nest or not to nest?<br \/>\nAdd Footer<br \/>\nNavLink<br \/>\nActive Link Styling with NavLink<br \/>\nAdding Host Vans Routes<br \/>\n\u00f0\u0178\u201d\u20ac Optional Side Quest &#8211; Building out the Host Vans List and Detail Pages<br \/>\nBuilding out the Host Van Detail page<br \/>\nRelative Links<br \/>\nBack to all vans<br \/>\nAdd \/host\/vans\/:id Nested Routes<br \/>\nAdd the Final Navbar!<br \/>\nOutlet Context<br \/>\nUpdate deployed version on Netlify!<br \/>\nSearch Params Intro<br \/>\nuseSearchParams<br \/>\nChallenge: Set up search params in VanLife<br \/>\nFilter the array w\/ the search param<br \/>\nChallenge: Filter the vans in VanLife<br \/>\nUsing Links to add search params<br \/>\nChallenge: Filter the vans with Links<br \/>\nUsing the search params setter function<br \/>\nChallenge: Filter the vans with a setter function<br \/>\nCaveats to setting params<br \/>\nMerging search params with Links<br \/>\nMerging search params with the setSearchParams function<br \/>\nChallenge: Conditional rendering practice<br \/>\nFix remaining absolute paths<br \/>\nBack to all vans<br \/>\nLink state<br \/>\nuseLocation<br \/>\nChallenge: conditionally render the back button text<br \/>\n404 Page<br \/>\n&#8220;Happy Path&#8221; &#8220;Sad Path&#8221;<br \/>\nQuick update to our fetching code<br \/>\nCoding the Sad Path &#8211; Loading state<br \/>\nCoding the Sad Path &#8211; Error handling<br \/>\nLoaders intro<br \/>\ncreateBrowserRouter<br \/>\nSetting up the data router<br \/>\nLoader function<br \/>\nChallenge: Vans List Loader<br \/>\nuseLoaderData<br \/>\nChallenge: useLoaderData in Vans List page<br \/>\nUse the loader data instead of the useEffect<br \/>\nLoaders Quiz<br \/>\nHandling errors<br \/>\nAdd errorElement to vans route<br \/>\nuseRouteError<br \/>\nInitial Login Form<br \/>\nNote from the future: importing image assets in Vite<br \/>\nProtected Routes<br \/>\nParallel Loaders demo<br \/>\nChallenge: Protected Routes w\/ loaders<br \/>\nChallenge: Protected Routes &#8211; pt 1<br \/>\nAside challenge: move remaining fetching to loaders<br \/>\nChallenge: Protected Routes &#8211; pt 2<br \/>\nSend login message prompt to login page<br \/>\nConsume message from search param on login page<br \/>\nPass message to Login page<br \/>\n\u00f0\u0178\u0152\u00b6\u00ef\u00b8\u008f Take: Forms in React are bad<br \/>\nSetting up for authentication &#8211; happy path<br \/>\nSetting up for authentication &#8211; sad path<br \/>\nuseNavigate()<br \/>\nReact Router Form Component<br \/>\nSetting up the Action function<br \/>\nAdd form and action to VanLife<br \/>\nAction function &#8211; params<br \/>\nAction function &#8211; request<br \/>\nGet form data in VanLife<br \/>\nUse data in action to log in<br \/>\nBetter (but still fake) auth<br \/>\nChallenge: send user to \/host route after log in<br \/>\nForm replace<br \/>\nuseActionData<br \/>\nAction error handling<br \/>\nAction error handling in VanLife<br \/>\nuseNavigation()<br \/>\nuseNavigation in VanLife<br \/>\nget previous route pathname<br \/>\nredirectTo &#8211; pt 1<br \/>\nredirectTo &#8211; pt 2<br \/>\nredirectTo in VanLife<br \/>\nDeferring data<br \/>\nPromises and defer()<br \/>\ndefer getVans()<br \/>\nAwait component<br \/>\nAwait in Vans route<br \/>\nAwait vans refactor<br \/>\nReact Suspense<br \/>\nSuspense in VanLife<br \/>\nPutting it all together &#8211; defer, Await, Suspense in HostVans<br \/>\nerrorElements in remaining van loading pages<br \/>\nPlaceholders are gone! \u00f0\u0178\u017d\u2030<br \/>\nCloud Firestore Setup \u00f0\u0178\u201d\u00a5<br \/>\nCloud Firestore Code Setup<br \/>\nCollection reference and getVans() function<br \/>\nCreate getVan() function<br \/>\nRefactor getHostVans function<br \/>\nFinal loose ends<br \/>\nOutro<\/p>\n<div style=\"text-align: center; font-weight: bold\">[<a href=\"https:\/\/www.youtube.com\/watch?v=nDGA3km5He4\" target=\"offsite\" rel=\"nofollow noopener noreferrer\" title=\"Read More on YouTube\">READ MORE<\/a>]<\/div>\n<p><em style=\"font-family: 'Times New Roman',Times,serif; color: #666;\"><span style=\"font-size: 3.5em; font-weight: bold;\">&#0148;<\/span><\/em><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>This course will teach you to build real-world apps with React Router 6. Click here to get to the interactive version \u00f0\u0178\u2018\u2030 https:\/\/scrimba.com\/links\/r&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[380],"tags":[],"class_list":["post-37731","post","type-post","status-publish","format-standard","hentry","category-video-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>[#Script #Coding] React Router 6 &ndash; Full Course - WHUZZUP!<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[#Script #Coding] React Router 6 &ndash; Full Course - WHUZZUP!\" \/>\n<meta property=\"og:description\" content=\"This course will teach you to build real-world apps with React Router 6. Click here to get to the interactive version \u00f0\u0178\u2018\u2030 https:\/\/scrimba.com\/links\/r...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/\" \/>\n<meta property=\"og:site_name\" content=\"WHUZZUP!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/EricBrooksDotComWeb\/\" \/>\n<meta property=\"article:author\" content=\"EricBrooksDotComWeb\" \/>\n<meta property=\"article:published_time\" content=\"-0001-11-30T00:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i3.ytimg.com\/vi\/nDGA3km5He4\/hqdefault.jpg\" \/>\n<meta name=\"author\" content=\"Eric Brooks\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@EricBrooksCom\" \/>\n<meta name=\"twitter:site\" content=\"@EricBrooksCom\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eric Brooks\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-router-6-ndash-full-course\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-router-6-ndash-full-course\\\/\"},\"author\":{\"name\":\"Eric Brooks\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/person\\\/3b162468e1f9814f6e9f61460db00a3a\"},\"headline\":\"[#Script #Coding] React Router 6 &ndash; Full Course\",\"datePublished\":\"-0001-11-30T00:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-router-6-ndash-full-course\\\/\"},\"wordCount\":784,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-router-6-ndash-full-course\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i3.ytimg.com\\\/vi\\\/nDGA3km5He4\\\/hqdefault.jpg\",\"articleSection\":[\"Video Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-router-6-ndash-full-course\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-router-6-ndash-full-course\\\/\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-router-6-ndash-full-course\\\/\",\"name\":\"[#Script #Coding] React Router 6 &ndash; Full Course - WHUZZUP!\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-router-6-ndash-full-course\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-router-6-ndash-full-course\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i3.ytimg.com\\\/vi\\\/nDGA3km5He4\\\/hqdefault.jpg\",\"datePublished\":\"-0001-11-30T00:00:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-router-6-ndash-full-course\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-router-6-ndash-full-course\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-router-6-ndash-full-course\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i3.ytimg.com\\\/vi\\\/nDGA3km5He4\\\/hqdefault.jpg\",\"contentUrl\":\"https:\\\/\\\/i3.ytimg.com\\\/vi\\\/nDGA3km5He4\\\/hqdefault.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-react-router-6-ndash-full-course\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[#Script #Coding] React Router 6 &ndash; Full Course\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#website\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\",\"name\":\"WHUZZUP!\",\"description\":\"What&#039;s new at EricBrooks.Com plus news and gossip all over CyberTown\",\"publisher\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\",\"name\":\"WHUZZUP!\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/images\\\/posts\\\/cropped-favicon_64-1.png\",\"contentUrl\":\"https:\\\/\\\/ericbrooks.com\\\/images\\\/posts\\\/cropped-favicon_64-1.png\",\"width\":512,\"height\":512,\"caption\":\"WHUZZUP!\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/EricBrooksDotComWeb\\\/\",\"https:\\\/\\\/x.com\\\/EricBrooksCom\",\"https:\\\/\\\/www.instagram.com\\\/ericbrooksdotcom\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/ericbrooksdotcom\",\"https:\\\/\\\/myspace.com\\\/ericbrooksdotcom\",\"https:\\\/\\\/www.pinterest.com\\\/ericbrookscom\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/ericbrooksdotcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/person\\\/3b162468e1f9814f6e9f61460db00a3a\",\"name\":\"Eric Brooks\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"caption\":\"Eric Brooks\"},\"description\":\"Web &amp; Graphic Designer, Blogger, Musician, Evil Clown. I also code websites and promote people for a living. Still kind of a jerk, though. Approach with food.\",\"sameAs\":[\"https:\\\/\\\/ericbrooks.com\",\"EricBrooksDotComWeb\",\"ericbrooksdotcom\",\"ericbrookscom\\\/\",\"https:\\\/\\\/x.com\\\/EricBrooksCom\"],\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/author\\\/site-admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[#Script #Coding] React Router 6 &ndash; Full Course - WHUZZUP!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/","og_locale":"en_US","og_type":"article","og_title":"[#Script #Coding] React Router 6 &ndash; Full Course - WHUZZUP!","og_description":"This course will teach you to build real-world apps with React Router 6. Click here to get to the interactive version \u00f0\u0178\u2018\u2030 https:\/\/scrimba.com\/links\/r...","og_url":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/","og_site_name":"WHUZZUP!","article_publisher":"https:\/\/www.facebook.com\/EricBrooksDotComWeb\/","article_author":"EricBrooksDotComWeb","article_published_time":"-0001-11-30T00:00:00+00:00","og_image":[{"url":"https:\/\/i3.ytimg.com\/vi\/nDGA3km5He4\/hqdefault.jpg","type":"","width":"","height":""}],"author":"Eric Brooks","twitter_card":"summary_large_image","twitter_creator":"@EricBrooksCom","twitter_site":"@EricBrooksCom","twitter_misc":{"Written by":"Eric Brooks","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/#article","isPartOf":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/"},"author":{"name":"Eric Brooks","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/person\/3b162468e1f9814f6e9f61460db00a3a"},"headline":"[#Script #Coding] React Router 6 &ndash; Full Course","datePublished":"-0001-11-30T00:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/"},"wordCount":784,"commentCount":0,"publisher":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/#primaryimage"},"thumbnailUrl":"https:\/\/i3.ytimg.com\/vi\/nDGA3km5He4\/hqdefault.jpg","articleSection":["Video Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/","url":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/","name":"[#Script #Coding] React Router 6 &ndash; Full Course - WHUZZUP!","isPartOf":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/#primaryimage"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/#primaryimage"},"thumbnailUrl":"https:\/\/i3.ytimg.com\/vi\/nDGA3km5He4\/hqdefault.jpg","datePublished":"-0001-11-30T00:00:00+00:00","breadcrumb":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/#primaryimage","url":"https:\/\/i3.ytimg.com\/vi\/nDGA3km5He4\/hqdefault.jpg","contentUrl":"https:\/\/i3.ytimg.com\/vi\/nDGA3km5He4\/hqdefault.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-react-router-6-ndash-full-course\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ericbrooks.com\/whuzzup\/"},{"@type":"ListItem","position":2,"name":"[#Script #Coding] React Router 6 &ndash; Full Course"}]},{"@type":"WebSite","@id":"https:\/\/ericbrooks.com\/whuzzup\/#website","url":"https:\/\/ericbrooks.com\/whuzzup\/","name":"WHUZZUP!","description":"What&#039;s new at EricBrooks.Com plus news and gossip all over CyberTown","publisher":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ericbrooks.com\/whuzzup\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization","name":"WHUZZUP!","url":"https:\/\/ericbrooks.com\/whuzzup\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/logo\/image\/","url":"https:\/\/ericbrooks.com\/images\/posts\/cropped-favicon_64-1.png","contentUrl":"https:\/\/ericbrooks.com\/images\/posts\/cropped-favicon_64-1.png","width":512,"height":512,"caption":"WHUZZUP!"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/EricBrooksDotComWeb\/","https:\/\/x.com\/EricBrooksCom","https:\/\/www.instagram.com\/ericbrooksdotcom\/","https:\/\/www.linkedin.com\/in\/ericbrooksdotcom","https:\/\/myspace.com\/ericbrooksdotcom","https:\/\/www.pinterest.com\/ericbrookscom\/","https:\/\/www.youtube.com\/user\/ericbrooksdotcom"]},{"@type":"Person","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/person\/3b162468e1f9814f6e9f61460db00a3a","name":"Eric Brooks","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","url":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","caption":"Eric Brooks"},"description":"Web &amp; Graphic Designer, Blogger, Musician, Evil Clown. I also code websites and promote people for a living. Still kind of a jerk, though. Approach with food.","sameAs":["https:\/\/ericbrooks.com","EricBrooksDotComWeb","ericbrooksdotcom","ericbrookscom\/","https:\/\/x.com\/EricBrooksCom"],"url":"https:\/\/ericbrooks.com\/whuzzup\/author\/site-admin\/"}]}},"_links":{"self":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/37731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/comments?post=37731"}],"version-history":[{"count":0,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/37731\/revisions"}],"wp:attachment":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/media?parent=37731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/categories?post=37731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/tags?post=37731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}