React Router 6 - Full Course

  Рет қаралды 234,000

freeCodeCamp.org

Жыл бұрын

This course will teach you to build real-world apps with React Router 6. Click here to get to the interactive version 👉 scrimba.com/links/react-router-6-course
Throughout the course, you’ll be building an app called “VanLife” - an Airbnb-style web app dedicated to renting out travel vans for your next big road trip!
As you build “VanLife”, 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.
This course was created by Bob Ziroll, Scrimba’s Head of Education.
🔗 Bob on Twitter here: bobziroll
🔗 Scrimba on KZbin: kzbin.info
⭐️ Get the code ⭐️
🔗 Scrimba course: scrimba.com/links/react-router-6-course
🔗 GitHub repo: scrimba.com/links/react-router-course-github-repo
💫 Links mentioned in course:
🔗 Scrimba’s Learn React Course - scrimba.com/learn/learnreact
🔗 VanLife Figma Design - scrimba.com/links/figma-vanlife
🔗 Firebase - scrimba.com/links/firebase-homepage
🔗 Firestore Docs, get all docs in collection - scrimba.com/links/firestore-docs-get-all-docs-in-collectionfirestore-docs-get-all-docs-in-collection)
🔗 Netlify - scrimba.com/links/netlify-home-page
🔗 GitHub Desktop - desktop.github.com/
🔗 Mirage JS - miragejs.com/
0:00 1: Introduction to React Router 6
4:56 2: Multi-page vs single-page apps
10:12 Extra: Local Development & GitHub Repo
12:25 3: React Router Setup & BrowserRouter
15:40 4: Routes
18:23 5: BrowserRouter & Routes Challenge
19:32 6: Route, Path, & Element
23:48 7: Quick Re-org
24:53 8: Link
28:55 9: VanLife project bootstrapping
37:01 10: Initial Deploy to Netlify
48:47 11: Mirage JS Server
50:41 12: Challenge: Vans Page - Part 1
1:02:09 14: Route Params
1:25:09 19: Nested Routes Intro
1:34:04 20: Fixing the Navbar with a Layout Route
1:46:45 22: Bootstrap the Host pages
1:50:45 23: Nesting the /host routes
1:54:34 24: Creating the Host Layout
2:01:04 25: Relative Paths
2:05:32 26: Index Routes
2:09:24 27: To nest or not to nest?
2:14:34 28: Nested Routes Quiz
2:19:26 29: Add Footer
2:22:47 30: NavLink
2:30:03 31: Active Link Styling with NavLink
2:39:14 33: Adding Host Vans Routes
2:44:28 34: Optimal Side Quest
2:47:49 35: Building the Host Van Detail page
2:56:47 36: Relative Links
3:03:51 37: Back to all vans
3:09:08 38: Add /host/vans/:id Nested Routes
3:17:17 39: Add the Final Navbar
3:23:53 40: Outlet Context
3:29:27 41: Update deployed version on Netlify
3:32:45 42: Search Params Intro
3:40:04 43: useSearchParams
3:48:55 45: Filter the array w/ the search param
3:55:47 47: Using Links to add search params
4:01:57 49: Using the search params setter function
4:08:05 51: Caveats to setting params
4:09:38 52: Merging search params
4:21:13 54: Challenge: Conditional rendering practice
4:25:56 55: Fix remaining absolute paths
4:27:50 56: Back to all vans
4:30:05 57: Link state
4:36:37 58: useLocation
4:47:31 60: 404 Page
4:53:22 61: Happy Path vs Sad Path
4:56:01 62: Update to our fetching code
4:59:02 63: Coding the Sad Path
5:07:37 65: Loaders intro
5:12:03 66: createBrowserRouter
5:18:13 67: Setting up the data router
5:21:00 68: Loader function
5:25:17 70: useLoaderData
5:29:52 72: Use the loader data instead of the useEffect
5:33:51 73: Loaders Quiz
5:37:06 74: Handling errors
5:39:49 75: Add errorElement to vans route
5:42:40 76: useRouteError
5:49:06 77: Initial Login Form
5:51:31 78: Importing image assets in Vite
5:54:22 79: Protected Routes
6:18:28 85: Parallel Loaders Demo
6:22:02 86: Challenge - Protected Routes
6:43:51 91: Send login message prompt to login page
6:46:56 92: Consume message
6:54:37 93: Pass message to Login page
6:58:26 94: Hot Take: Forms in React are bad
7:00:58 95: Setting up for auth
7:13:57 97: useNavigate()
7:17:44 98: React Router Form Component
7:20:41 99: Setting up the action function
7:25:13 100: Add form and action to VanLife
7:27:31 101: Action function
7:32:39 103: Get form data in VanLife
7:34:22 104: Use data in action to log in
7:36:57 105: Better (but still fake) auth
7:44:08 107: Form replace
7:49:23 108: useActionData
7:53:50 109: Action error handling
8:00:00 111: useNavigation()
8:08:07 113: Get previous route pathname
8:15:05 114: redirectTo
8:30:37 117: Deferring data
8:33:35 118: Promises and defer()
8:39:19 119: defer getVans()
8:41:04 120: Await component
8:55:28 123: React Suspense
9:00:27 124: Suspense in VanLife
9:03:51 125: Putting it all together - Defer, Await, Suspense in HostVans
9:08:31 126: errorElements in remaining van loading pages
9:11:55 127: Placeholders are gone!
9:13:57 128: Cloud Firestore
9:23:25 130: Collection reference and getVans() function
9:30:54 131: Create getVan() function
9:35:42 132: Refactor getHostVans function
9:39:29 133: Final loose ends

Пікірлер: 303
@Mr_Brian
@Mr_Brian Жыл бұрын
Bob Ziroll is just one of the best instructors for React. I did his 12 hour course of React for beginners and I loved it.
@NobleOsinachi
@NobleOsinachi 11 ай бұрын
12hrs! Beginner?! 💀💀💀💀💀💀💀💀💀💀💀💀
@nada125love
@nada125love 11 ай бұрын
I learned react from him too. he is the best.
@Arcanist1010
@Arcanist1010 10 ай бұрын
@@NobleOsinachi Yes and 13 hours react advanced (including the react router)
@dooistyping158
@dooistyping158 10 ай бұрын
​@@Arcanist1010where can I find this course ?
@harmez7
@harmez7 10 ай бұрын
yes, me2. he did a great job at that video.
@siddhantjain490
@siddhantjain490 Ай бұрын
Best course I have ever taken. The small challenges and the fact that he neither wasted time on CSS nor on making components and taught us Routing was so Fun. Also, he has given access to Figma file, so we can work on CSS skills later. More courses like these.
@wenatairs6629
@wenatairs6629 Жыл бұрын
Yes, this is what was needed after React Router was updated to this new version. Thanks FCC and thanks Bob for this amazing course. Now , time to dive in
@jeyfason417
@jeyfason417 11 ай бұрын
Bob Ziroll is my favorite instructor whenever i see any course prepared by him i feel like i'm in good hand for getting better knowledge. thanks Bob Ziroll for your react beginner course was real helped me
@prathameshlakhpati9970
@prathameshlakhpati9970 Жыл бұрын
The way he breaks down the whole topic is just fantastic. Appreciate
@Sara-rg2wq
@Sara-rg2wq 11 ай бұрын
this is literally the best course ever i could not thank u guys enough + im really grateful for all the the hard work that u r putting in these courses
@njiahtata2267
@njiahtata2267 3 ай бұрын
Bob Ziroll you are an excellent teacher. This is absolute freedom from tutorial hell.
@jacktorres5871
@jacktorres5871 8 ай бұрын
Very awesome course! Loved the instructor and loved how Scrimba works, though I still mostly ran the project locally to get familiar with the dev workflow and to save my code edits for each section separately. I learned an incredible amount of info from this, thank you FCC and Bob!
@lisalee7946
@lisalee7946 4 ай бұрын
I found the best course taught by the best instructor!!! Thank you so much Bob Ziroll!!!!!! I love your class so much!! Thank you for helping me learning!!
@GilbertoMadeira83
@GilbertoMadeira83 Жыл бұрын
I've attended his react course , I can tell for sure that it was the best course of all youtube I could find! it would be perfect to wrap this series with a react native , a redux, and a nextjs course, thanks freecodecamp, you rock.
@sahaneakanayaka3394
@sahaneakanayaka3394 Жыл бұрын
The pitch of his voice has already told me that you are going to master react-router... Love you Bob....😍🙏
@hasanhafiz
@hasanhafiz Жыл бұрын
He has a brilliant teaching skill ❤. I love his teaching method
@gabrielgomesmabiala6707
@gabrielgomesmabiala6707 Жыл бұрын
I love the way that Bob Ziroll Teach great job thank you so muach for making this available for freen see you on scrimba
@TheFuneralmask
@TheFuneralmask 11 ай бұрын
For anyone stuck around 6:40:00 requireAuth this fixed it for me: export async function requireAuth() { const isLoggedIn = false if (!isLoggedIn) { const response = redirect("/login") response.body = true throw response } return null }
@prashlovessamosa
@prashlovessamosa 10 ай бұрын
Thanks 🙏
@manjosh1990
@manjosh1990 10 ай бұрын
was breaking my head. Thanks for the help!
@MuhammadAbbas-bd4kg
@MuhammadAbbas-bd4kg 10 ай бұрын
Thanks, you saved my time😄😄
@lnghs
@lnghs 8 ай бұрын
thanks a lot. it took me hours but I couldn't solved it.
@abd.alharbi
@abd.alharbi 8 ай бұрын
I get a 'Body is a read-only property' error. I'm developing in typescript. Not sure if that could be a problem!
@kimsoyoung1257
@kimsoyoung1257 11 ай бұрын
After learning react for beginner's much helpful to me ! Thanks so much to Bob's Ziroll and free code camp community ❤, hope that would interesting too !
@selahadinjemal7138
@selahadinjemal7138 Жыл бұрын
Bob Ziroll is the best React instructor that I have come across so far. His teaching styles are unmatched. unlike many other tutorials on youtube that you just follow along, he's tutorial is highly interactive and makes you do much of the work. I took his learn react course in Scrimba, I can proudly say that It is the best react course for beginners. Can't wait to work on this one!. Also shoutout to freecodecamp for finding such individuals and convincing them on offering their services for free.
@TechStat382
@TechStat382 Жыл бұрын
I have never seen a best teacher like Bob ZIroll
@Neil_09
@Neil_09 4 ай бұрын
Bob ziroll is such a wonderful instructor he made me fall in love with react. Hope he can do a course on react query. He's competent and simplifies things down to to the grain.
@user-qe3fs4ul9y
@user-qe3fs4ul9y 5 ай бұрын
Bob ziroll is a powerful teacher, incredibly helpful course🙏 would love to see a course like this for react hooks
@emersontavera9362
@emersontavera9362 11 ай бұрын
for anyone who needs it (code below), regarding the Merging search params subject, this utility funciton allows to handle multiple query parameters in a single function, allowing you to create x amount of parameters, AND also adding or removing values from one specific query parameter that holds concatenated data %3, and also mixing together multiple query parms to create a more flexible filter mechanism. Keeping in mind that it's not common to have identical keys with different values, we can just cocatenate that related data in one param and separate it with %3. + other params that achieve other purposes. (this function respects other params existing in the url) You just need to add the event, a queryParameter parameters to the function and pass it to a component onClick attribute (the button in this case must define the attribute name which will provide the value pair for the queryParameter) I HAVE TO SAY THAT I'M LEARNING A LOT, THANK YOU SO MUCH const addQueryParam= (ev, type) =>{ let value = ev.target.name; if(searchParams.has(type)){ let param = searchParams.get(type).split(":"); if(param.includes(value)){ let newParams = param.filter(ev => ev !== value); setsearchParams((prev)=> { newParams.length===0 ? prev.delete(type) : prev.set(type, newParams.join(":")); return prev; }) }else{ setsearchParams((prev) => { prev.set(type, param.join(":").concat(`:${value}`)) return prev; } ) } }else{ setsearchParams((prev) => {prev.append(type, value) return prev; }); } } For clarity addQueryParam(e, "filterBy")} >Simple
@adeebogaili2111
@adeebogaili2111 Жыл бұрын
I loved Bob's React course. This will be fun coding allong.
@digitalchannel7651
@digitalchannel7651 Жыл бұрын
One of the best tech teacher.
@danielsegura6594
@danielsegura6594 Жыл бұрын
I was looking for a complete React Router v6 course long time ago! Thank you so much!
@aerofred2002
@aerofred2002 8 ай бұрын
Great as usual. Appreciate the update. I hope he makes a video on the new redux tool kit and react 18 new features. Next JS solves most of these routing problems but not every company uses it, and learning next JS becomes much easier if you know how to do this routing manually.
@Dakren12
@Dakren12 Жыл бұрын
It's almost like you knew I needed this.
@user-ge5kw1cl3k
@user-ge5kw1cl3k Жыл бұрын
Great tutorial that i ever watch so far about react router
@edward_cullen.07
@edward_cullen.07 Жыл бұрын
Always incredible 👍👍👍.
@kushalshukla444
@kushalshukla444 Жыл бұрын
scrimba and bob ziroll helps me alot !!!!!!!!!!!
@user-qs1by9fl1i
@user-qs1by9fl1i 5 ай бұрын
Bob ziroll is a beast i learnt react from his course and cany wait to start this course
@codepologist
@codepologist Жыл бұрын
This is awesome. I'd love to see a video like this that is dedicated to just React Hooks and then Redux.
@capchipcup
@capchipcup 8 ай бұрын
thanks for the new knowledge about react-router bob, what a great free course
@exe.m1dn1ght
@exe.m1dn1ght 4 ай бұрын
Bob Ziroll, you are a great Master, thank you so much for this exceptional tutorial !!
@uchihamadara4340
@uchihamadara4340 4 ай бұрын
thank you Bob Ziroll you did a great job .i love this video you make it easy and Cristal clear .
@oliverye55
@oliverye55 Жыл бұрын
incredibly helpful. thank you so much for your time !
@itspawanpoudel
@itspawanpoudel Жыл бұрын
I already know react router v6, but I am just here to hear bob ziroll voice. His voice is just perfect
@rohitkumarkhatri2203
@rohitkumarkhatri2203 Жыл бұрын
Amazing Course. Thanks!
@IAmJailan
@IAmJailan 11 ай бұрын
learning react with bob is amazing ♨♨
@maklonfr9410
@maklonfr9410 Жыл бұрын
Wowww amazing long time course. Thanks
@Kholturaev06
@Kholturaev06 Жыл бұрын
Thanks a lot for such great course!!!
@tusharghildiyal6814
@tusharghildiyal6814 Жыл бұрын
Damn never imagined a freaking 9 hours course on JUST React Router 😮 Kudos to FCC 🔥
@ZM-dm3jg
@ZM-dm3jg Жыл бұрын
Why do you think that's a good thing lol? Waste of time, just read the docs. If you need a 9 hour course on react-router instead of reading the docs, there's probably no hope for you as a developer.
@phongphanthanh6878
@phongphanthanh6878 Жыл бұрын
@@ZM-dm3jg If you read it, you forget it. If you see it, you will remember it. If you think reading the docs is enough, there's probably no hope for you as a developer
@riturajpathak1905
@riturajpathak1905 Жыл бұрын
​@@phongphanthanh6878 reading docs is a good practice and is recommended.
@phongphanthanh6878
@phongphanthanh6878 Жыл бұрын
@@riturajpathak1905 watching also
@tusharghildiyal6814
@tusharghildiyal6814 Жыл бұрын
@@ZM-dm3jg I read full documentations. I refer the documentation everytime i get stuck. But its good to have a course taught by a professional on how to structurally use a library. We get to learn new things ✌
@atsgames807
@atsgames807 7 ай бұрын
ek number ka coursh hai abhi lagata hai ki ha kisi bhi tarah ka routing kar sakta hu mere tarf se 1000 topo ki salami
@thehelldesk5463
@thehelldesk5463 4 ай бұрын
This course is usefull for everyone not just the beginners. Since the React Router Dom team is a bunch of trolls who never update their documentation and examples, it's a mess and a waste of time to figure out how to do a proper authentification routing. Ofc this video doesn't cover every cases as you "cheat" using createRoutesFromElement (yes i tried with a pure createBrowserRouter cause i want the object approach and it's painfull) but it's way better than the lack of official documentation. Thank you.
@emersontavera9362
@emersontavera9362 11 ай бұрын
2:19:29 I love your teaching methodology, thanks :3 see u at the end of the course
@TheTop-si5fo
@TheTop-si5fo Жыл бұрын
Awesome instructor!
@nigistbinyam9859
@nigistbinyam9859 Жыл бұрын
Thank you all information you gave us
@qwertymegaforce9088
@qwertymegaforce9088 5 ай бұрын
This video helped me a lot! Thank you!
@favourz1
@favourz1 Жыл бұрын
Thank you Freecodecamp, You all put in a lot of work and i appreciate you all big time. You release vids & tuts in line with my learning journey. Respect 🤝
@mahendranath2504
@mahendranath2504 Жыл бұрын
Thank you so much for such an amazing constant 👌👍🤝🤛👏🤲👐✌️🙏
@jaymahakaal5354
@jaymahakaal5354 Жыл бұрын
Pranaam guruji🙇 2 month ago i completed your 12 hour react course it helped me alot to developed my practical skills of react same goes for routerV6. Please do the same with Redux i'm seriously facing alot issues to master the ReduxToolkit.
@jawadullah4685
@jawadullah4685 Жыл бұрын
same
@anubhavgupta4917
@anubhavgupta4917 6 ай бұрын
Best Video on React Router Dom 😇😇😇😇😇😇😇😇😇😇😇 Guru ji you are the best
@kasukurthignanu
@kasukurthignanu Жыл бұрын
React router I have been waiting for this video
@mentanagavenkatasrinivas9245
@mentanagavenkatasrinivas9245 10 ай бұрын
Simply Awesome!
@KrishnaKumar-qx1mk
@KrishnaKumar-qx1mk Жыл бұрын
I completed his react course and I was searching some other courses for Practice, but none of them were as good as his react course
@GabriGG229
@GabriGG229 4 ай бұрын
Awesome course 🔥🔥🔥
@phanikishanyt
@phanikishanyt Жыл бұрын
We need an exclusive course covers all the hooks please
@mrmae99
@mrmae99 Жыл бұрын
I really like this channel
@joshuastories
@joshuastories Жыл бұрын
This was great thank you
@JustSkillGG
@JustSkillGG Жыл бұрын
Guys trust me on that. Bob Ziroll is definitely one of the best (if not THE best) react teachers on planet earth. This course will be worth it. ( even though we use NextJS and we don't need React Router )
@HocineKamikaz
@HocineKamikaz Жыл бұрын
So if u don't need to learn them both?.. U need to learn only next js then?
@BiMiHi
@BiMiHi 6 ай бұрын
@@HocineKamikaz there are differences, like with everything. You can use nextjs or react router
@Tr1ckyP1cky
@Tr1ckyP1cky Жыл бұрын
For anyone that's stuck on the protected routes, the error that you're getting might be because of Mirage JS not being able to play well with react-router version 6.4.5. There's two options to fix this, either downgrade your version or try this hacky code that bob helped me with export async function requireAuth() { const isLoggedIn = false if (!isLoggedIn) { const response = redirect("/login") response.body = true throw response } return null }
@antihero8
@antihero8 Жыл бұрын
Thanks, helped a lot 😊
@JavadMoghaddam-dq9bd
@JavadMoghaddam-dq9bd Жыл бұрын
Hi, I have a problem here . when the isLoggedIn is set to false it works correctly and redirects me to login page , but when it is set to true , after clicking on Host an error shows up : Unexpected Application Error! You defined a loader for route "0-5-0" but didn't return anything from your `loader` function. Please return a value or `null`. does anybody have the same problem!??
@Tr1ckyP1cky
@Tr1ckyP1cky Жыл бұрын
@@JavadMoghaddam-dq9bd you need to return null or function where youre calling your authRequire
@abhishekkumarsingh2387
@abhishekkumarsingh2387 Жыл бұрын
thanks buudy, saved my day
@uchepeter949
@uchepeter949 11 ай бұрын
Thanks bro, you just saved me days of trying to figure this out.
@schaun7446
@schaun7446 11 ай бұрын
absolute banger!
@shamstabrez2986
@shamstabrez2986 Жыл бұрын
plz do more react videos on each topic like this in depth
@alexanderkomanov4151
@alexanderkomanov4151 Жыл бұрын
Wow! Amazing!
@vinaykumarkharwar177
@vinaykumarkharwar177 3 ай бұрын
Completed!
@_rachid
@_rachid Жыл бұрын
Thank you !
@temitopeabiodun71
@temitopeabiodun71 6 ай бұрын
This guy is too good.... Glued for 2 hours and still counting
@not_amanullah
@not_amanullah 3 ай бұрын
This is helpful ❤
@sohaibshaikh5534
@sohaibshaikh5534 10 ай бұрын
Best course
@AayushPoudel-ep7gy
@AayushPoudel-ep7gy Жыл бұрын
thank you
@yevhenlysenko7444
@yevhenlysenko7444 Жыл бұрын
thanks a lot for lesson. Would be nice to see to prevent a page reload or route change when the user leaves the page.
@karimzz7843
@karimzz7843 4 ай бұрын
Thank you very much
@toleenhajkassem6154
@toleenhajkassem6154 6 ай бұрын
Thank you so much !!!
@a1x5h04
@a1x5h04 Жыл бұрын
I am a simple man, I see bob ziroll teaching a course, I tap on it
@bishnudev1760
@bishnudev1760 Жыл бұрын
Try making a fullstack app with Angular as Frontend and Java or Golang as Backend. Thanks 😊
@programmingcoding
@programmingcoding Жыл бұрын
Thanks
@havefun5519
@havefun5519 10 ай бұрын
Question: Seems some UI part we don't need or MUST use route, right? Like /host/vans/:id vansDetail page, bottom 3 tabs, we could use components to show/hide them directly? So how should we tradeoff when it should be route and when it should not.
@nikmat
@nikmat 10 ай бұрын
Bob Ziroll 🙏
@sajalgupta2204
@sajalgupta2204 Жыл бұрын
2:06-lesson 1- for client side routing. 4:55-lesson 2- multi page vs single page app. 10:12--extra local development & GitHub repo. 12:25-L3 react router setup & browser router. 15:40--L4 Routes 5:12:02-- lesson 66 about the createBrowseRouter
@Impulse.V
@Impulse.V Жыл бұрын
Lmao what did they do 5 hours before? 😂
@HocineKamikaz
@HocineKamikaz Жыл бұрын
Can i ask you why is this course 9h length while most of react routers tutorials are 1h or 1h and and half
@rafidhoda
@rafidhoda Жыл бұрын
Woooo 🎉🥳🔥
@kamilkacer7069
@kamilkacer7069 6 ай бұрын
Great tutorial the best I have seen but one improvement u can add deesser on your mic sound the sounds like sss and tss are not so sharp and will not cut my ears
@jimhapper7245
@jimhapper7245 Жыл бұрын
Is there an advantage/problem with using React Hook Form together with (or instead of) the Form component from React Router?
@079Francvs
@079Francvs 7 күн бұрын
wao increible explicacion
@OneBit01
@OneBit01 Жыл бұрын
Great 👍
@jimshtepa5423
@jimshtepa5423 Жыл бұрын
is not rendering the component to prevent unauthorized usage of the service is a good way to protect the service?
@murtuzafatah762
@murtuzafatah762 Жыл бұрын
Are you hacker man ! , Whatever I search to learn and you have awesome course on it
@santiagoquintero1350
@santiagoquintero1350 Жыл бұрын
gys , I have a question , how much time did you spend in this course?
@lakshmichaitanya1316
@lakshmichaitanya1316 Жыл бұрын
Will there be any course on mern stack on the future?
@ronaldpaek
@ronaldpaek 8 ай бұрын
I have a question if u have a async fetch function that u return await res.json() do you need to await it when u call it in the loader? Shouldn't it be resolved?
@abhishektrivedi2054
@abhishektrivedi2054 9 ай бұрын
What is the alternative way of using prompt in react-router- dom since it's no more available on version 6.15?
@ahmedwael3919
@ahmedwael3919 Жыл бұрын
I have a problem with redirect(url) function, it doesn't redirect me to the login page.
@marrytushsky4652
@marrytushsky4652 Жыл бұрын
Bob 💫🙇
@TheRuNNeRs22
@TheRuNNeRs22 Жыл бұрын
I can' t deploy the finished project at netlify. I took the code from the last scrim, pushed it with git, but I get an error. [vite]: Rollup failed to resolve import "react-icons/bs" from "/opt/build/repo/pages/Host/Dashboard.jsx". 12:16:32 PM: This is most likely unintended because it can break your application at runtime.
@O1L2E3G
@O1L2E3G 3 ай бұрын
Tnx for ur work. I didn't watch the whole thing, But since you have a separate protected route (branch) (../host/..), why didn't you bring the authorization logic into the parent loader? Are you really going to duplicate the authorization logic into the each loader in all nested routes? What about : ../host/warehouse/add/product/...? await requireAuth(request)} > .....
@forellko8600
@forellko8600 Жыл бұрын
cool!
@sazk4000
@sazk4000 Жыл бұрын
i don't have 9 hours free. i'll just go and read the documentation
@MrDima123123
@MrDima123123 10 ай бұрын
Really. 9-hour course just to learn how to use one library. 12 hours - it's the "Fast AI" machine learning course.
@user-cv2cd8wh9r
@user-cv2cd8wh9r Жыл бұрын
Thanks for the awsom video. I'm using router dom v6.11 and have problem redirect host and its child components to login page. It either breakes or does not navigate to login. I already tried useHistory and useNavigate, but have the same issue. Could be that the backend has some problem with this version?
@abdulhakeemakinola9895
@abdulhakeemakinola9895 Жыл бұрын
import { redirect } from "react-router" export async function requireAuth() { const isLoggedIn = false if (!isLoggedIn) { const response = redirect("/login") response.body = true throw response } return null } use this... issue is from mirageJS and the latest version of RRD
@dianciehake
@dianciehake 9 ай бұрын
Do I have to learn React Router? Next.js has Page/App Router.
@dieguin5493
@dieguin5493 Жыл бұрын
is it still worth learning to code when it exists already AI like chatGTP? It is not sarcasm, on the contrary, it is a serious question.
@yojansh
@yojansh 11 ай бұрын
So I haven't really tested this fully but @6:12:39 wouldn't it be a little less tedious to have a `authLoader` wrapper around those protected loader? Something along the lines of ``` function authLoader(loader) { return async (...args) => { const isLoggedIn = true; if (!isLoggedIn) { return redirect('/'); } return await loader(args); }; } ``` That way you can just wrap your loader in Routes instead of adding that logic across all your protected loaders. Kinda like this: ``` ``` Or is there some downside or perf penalties that I'm not seeing here?
@agustingorgni8866
@agustingorgni8866 10 ай бұрын
9:44:40 but you are getting a thousands of elements and then you are filtering them based on the query param..is that ok? Can't you just retrieve already filtered data from an API based on the query param?
@pierre-emmanuelwulfman104
@pierre-emmanuelwulfman104 4 ай бұрын
I am a bit confused about the chapter on protected routes. I want to use this in my app because I don't want to trigger a request which will return a 403 unauthorized and show a skeleton page. What I am confused about is the use case that is described here : 1. Having sensitive information in the front-end 2. Avoiding to make a request that would leak sensitive information. This the js code is availiable on the browser (just open the dev tools). Even if you cannot access the page cannot you read the js code of the page ? If so, you can just read the secret. Similarly, you can also see the code of the fetch that leak the secret. My point is that this is a bad use-case and a bad solution to the use-case. We want to protect some route but if you want something to be secret you need to have it in the backend, not the front-end and ensure that it is only availible trough authorized endpoint
Пробую самое сладкое вещество во Вселенной
00:41
Final muy inesperado 🥹
00:48
Juan De Dios Pantoja
Рет қаралды 17 МЛН
100❤️
00:20
Nonomen ノノメン
Рет қаралды 76 МЛН
World’s Deadliest Obstacle Course!
28:25
MrBeast
Рет қаралды 99 МЛН
Пробую самое сладкое вещество во Вселенной
00:41