How To Redirect In React - React Router V5 Tutorial | Redirecting, useHistory...

Подписаться 207 тыс.

Просмотров 195 тыс.

50% 1

Redirecting In React Tutorial | How to redirect in react using React-Routing-Dom. In this tutorial I go over how to redirect after login and based on authorization.
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🌟 Learn Programming Fundamentals on Brilliant: brilliant.sjv.io/PedroTech
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Email: machadop1407@gmail.com
Equipments I Use:
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🌟 Algorithm Book To Pass Coding Interviews: amzn.to/2Z2CirS
🌟 Microphone: amzn.to/2MKAm4V
🌟 Keyboard: amzn.to/3tvU6ZR
🌟 HD Webcam: amzn.to/3tMpJPD
🌟 Room LED Lights: amzn.to/3a5mFGp
Tags:
- Axios
- Fetch
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

Наука

Опубликовано:

15 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 188

@PedroTechnologies 2 года назад

Hey everyone! React router updated and now the useHistory hook doesn't exist anymore. I made a video going over the useNavigate hook which does the same thing: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UjHT_NKR_gU.html

@taj8654 2 года назад

Correct 😉!

@ameyjeurkar9405 Год назад

Step 1- import {useNavigate} from 'react-router-dom'; Step 2- let navigate = useNavigate(); Step 3- navigate('/path');

@kasirbarati3336 Год назад

Suggestion, just edit the video and add a picture that contains this comment.

@aakash1103jha 2 года назад

This video was such a great help, and helped me to find, and understand, what I was doing wrong. Thanks a lot. Cheers man!

@mks33621996 3 года назад

Finally the right resource I was looking for with simple explanations and implementations. Thanks, PedroTech!

@PedroTechnologies 3 года назад

Great to hear!

@justACasualProgrammer 2 года назад

I agree! the docs for the react-router-dom is very confusing for beginners, this video is the best way to explain the concept of redirect in the simplest way.

@TheRailfanz 3 года назад

Perfect tutorial on perfect time for me! Thank you Pedro!

@PedroTechnologies 3 года назад

Great to hear!

@pascallim3358 2 года назад

Thanks for your vids Pedro ! You're explaining very well, you're the best !! 😁

@bluesteel1 2 года назад

this is exactly what i was searching for

@thecyrusj13 2 года назад

This was how I thought things worked but I wasn't sure. Thanks for the clarification.

@joelkratos2011 2 года назад

Duuuude you are amazing! Thank you so much for this tutorial

@MrComicSG 2 года назад

Thankyou so much for this simple tutorial. Short and well explained

@shubhammukherjee2405 Год назад

Thanks, PedroTech!

@WendyLiving 2 года назад

Straight to the point 👌🏼

@shanzanematnemat5842 3 года назад

short and clear tutorial !

@jcavenue 2 года назад

I bet this is the best tutorial for redirect!

@dakotafabro2098 2 года назад

Thank you so much! This was so helpful!

@sonamohialdin3376 2 года назад

This short tutorial is so good

@prashinmore2251 3 года назад

You always have the perfect video for whatever I need. Thanks a lot

@PedroTechnologies 3 года назад

Happy to help!

@keme475 2 года назад

You are one of the best brothers...

@eusouluao 3 года назад

Cara, vc fez o tutorial que eu tava precisando! Btw, meus projetos tô construindo seguindo o que aprendo aqui kkkk valeu demais!

@PedroTechnologies 3 года назад

kkkkkk fico feliz em está ajudando!

@goodtimefilms6091 Год назад

Inglês brabo!! Ótimo video Pedrão!!!

@juliengeffriaud3249 3 года назад

Thanks a lot, just what I needed :-)

@kelanhamman2901 Год назад

Thank you! so helpful!

@Scrimm_ Год назад

Thank you! Simple! useNavigate makes it even SIMPLIER!!!

@oomkaarkhamitkar5499 2 года назад

bro you save my life it work

@MyGURUPREET 2 года назад

Thanks for this video,helped me in my work.

@sarvarkhalimov111 2 года назад

Thank you so much Pedro)

@olgalucia806 2 года назад

Excelente video, Amazing video, Regards from Colombia

@infinitebeast5517 2 года назад

thank you so much. This really helped.

@INfoUpgraders 3 года назад

Love the react tutorials 🙏

@PedroTechnologies 3 года назад

Happy to hear you are liking them!

@nwobodogeorge5370 3 года назад

Thank you. I love the way you simply things

@PedroTechnologies 3 года назад

Thanks for watching!

@saurabhdaswant7833 Год назад

thanks man it worked! : )

@varaprasad4163 3 года назад

Thanks, Brudda! such great content.

@PedroTechnologies 3 года назад

I appreciate that!

@hcam93 2 года назад

Really helpful thank you

@prajaktabadgujar2113 2 года назад

thanks you , i watched 2,3 videos and i wasnt getting it .... now i know what to do

@piuskariuki5295 3 года назад

Good stuff Pedro. Thank you.

@PedroTechnologies 3 года назад

Glad you liked it!

@rhythmshandlya9307 2 года назад

Such a blessing

@hamzahahmad1670 3 года назад

Really enjoying the constant flow of quality tutorials. I'm hoping your channel blows up soon

@PedroTechnologies 3 года назад

I appreciate that! Thank you for the support!

@ivgadev 3 года назад

Thank you very much Pedro!

@PedroTechnologies 3 года назад

THank you for watching!

@aravindakolitha 2 года назад

Thank you sensei. :)

@GMERT 2 года назад

You are the best teacher I have on youtube. Please I want you to do a video on how to add * thank you page to emailjs react code *. I have been battling with that for weeks

@neranjanapriyashantha8555 Год назад

You are my second react teacher. Thank u so much

@bhuvadarshak661 Год назад

First' kon he?

@DaKingOfBall23 2 года назад

Very simply put

@radojicicugo1105 2 года назад

Thanks man :)) i love you

@jonathan_bestprime 3 года назад

Thank you very much from Colombia!

@PedroTechnologies 3 года назад

Glad it helped!

@1aannuu 2 года назад

This video was really helpful. I am a beginner and was very confused about this concept. Thank u

@PedroTechnologies 2 года назад

Glad it was helpful!

@shinoy7280 Год назад

Me too man ,as a beginner I find this authenticated login part is tough

@user-pg3kf7es6m Год назад

Thanks a lot!

@dawoodshahzad9082 3 года назад

very easy to understand. Thumbs up bro!

@PedroTechnologies 3 года назад

Glad to hear that!

@angelrattaner4160 2 года назад

i love you no bullshit exactly what i needed keep the good work man!!

@PedroTechnologies 2 года назад

Hahaha I appreciate the support!

@everybodyneedsinspiration1757 2 года назад

@@PedroTechnologies man, how can I redirect to a URL only one per session? If they go back, will not be redirexted again

@TheSoulCrisis 2 года назад

It's amazing to me something as basic and central as linking to other pages loading data has so much inconsistency between the methods to achieve it and many don't work for some reason depending on how the data is structured and being fetched. The way you said you were surprised at how much of an issue this was for newcomers is very much expected to me, I'm new to React and the official docs don't go into it from what I see, while I try referencing material from the official site for React Router and it's been annoying to get working right now.

@quickSilverXMen 8 месяцев назад

good explanatory video.

@abhaytiwari6411 3 года назад

I Appreciate your Hard Work.

@PedroTechnologies 3 года назад

So nice of you! Glad you liked the video!

@corinadavid1813 3 года назад

Finally a good explanation

@PedroTechnologies 3 года назад

Glad u liked it!

@leofreiitas 2 года назад

Dude, I would give you a kiss if I could, thank you so much!!!

@rangabharath4253 3 года назад

Awesome as always 👍😀

@PedroTechnologies 3 года назад

Thank you! Cheers!

@FarazGhani 3 года назад

Other really confusion the code. you explain it very sweetly. my problem solve just in 5 mint.

@PedroTechnologies 3 года назад

Awesome! Glad I could help!

@sajay96 3 года назад

thank you

@fuelledbycoffeee 3 года назад

Thanks pedro!

@PedroTechnologies 3 года назад

Thank you for watching!

@audrieannelissedelcidochoa15 3 года назад

Esta cuenta siempre me salva :3 Gracias!

@PedroTechnologies 3 года назад

Jajajaja de nada. Me alegro que estés disfrutando de los videos

@ahmmadawshaf 3 года назад

Thank you soo much broo!! I'll subscribe to you for this. And also what extensions are you using in your VS code for the font color and icon logos on the directory?

@lucasellery5892 5 месяцев назад

Somos os melhores na programação

@vsemprivet9493 3 года назад

thank bro!!! really help me 👍👍👍👍👍

@PedroTechnologies 3 года назад

Glad to hear that

@mbfreitas0 3 года назад

Obrigado Pedro !!!

@PedroTechnologies 3 года назад

Fico feliz que você gostou!

@tibinsunny 3 года назад

Finally Found it 😍

@PedroTechnologies 3 года назад

Awesome!

@andresbustamante972 3 года назад

Ty bro

@ferbal6319 3 года назад

Thanks you bro !!

@PedroTechnologies 3 года назад

You're welcome!

@ocity5905 3 года назад

thanks

@pirajeeth878 3 года назад

Woooooowwwwwwwwwwwww Perfect...

@chidanandmd5583 2 года назад

Super

@issambenhassine2016 2 года назад

thx

@alaaasassii4433 2 года назад

one thing I learnt today is if your app didn't show other pages and you use in Route "component" you can use "element" hope it Works

@rilangkishabong1723 3 года назад

Thanks brother.

@PedroTechnologies 3 года назад

Thank you for watching!

@yotsusan_machi Год назад

thank

@sudhirkalivarapu97 2 года назад

bro your videos are good please show how to reroute to login page if local storage is empty using latest version of react and

@shreyaramtirth4360 3 года назад

Thank a lot🙏🙏🙏

@PedroTechnologies 3 года назад

Always welcome

@junjietan2668 3 года назад

React master pedro😎 Good job! Just wondering would you do any chart library that using react in your tutorial list? Thanks!😄

@PedroTechnologies 3 года назад

Hahaha thank you for watching! People were requesting me to make a video on chartjs so maybe!

@lokmanlife3023 3 года назад

Thank you..

@PedroTechnologies 3 года назад

Glad you liked it!

@_HaGiaat 2 года назад

rat hay minh da lam dc

@kabburebh 3 года назад

thanks pedro, this tutorial was really helpful. How do I set the prop to true or false in app.js

@PedroTechnologies 3 года назад

Glad you liked it! When you call the component, just pass the value of the prop as true or false. I have a video on props if you are interested! I recommend in this case using a global state through the context api!

@getoverhere4465 Месяц назад

When useHistory changes pages, does it get rid of the memory or cache in the browser? For instance, if I have a function call history.push() and then execute a bunch of other code, will the other code continue to execute after the new page loads?

@kinoshan591 3 года назад

👍

@kavalisuresh8670 2 года назад

Nice video sir. How to validate for through particular user id and password of user?

@EnesKab 2 года назад

For some reason, when i try to use redirect in component as you have showed in the video, i get an error that says redirect can only be used inside the router. Any ideas?

@mohanj2849 2 года назад

Yes this video is very helpfull, but i had doubt bro. after filling the form can we redirect the profile page ??

@clarkchen1209 2 года назад

If the route you're redirecting to has been updated, will redirect capture that update? Or will you need to refresh somehow?

@ColdbloodDK 2 года назад

As an Italian I can understand you better than docs

@ramonpaolomaran2253 2 года назад

Cara, uma pergunta. Quando o usuário loga, e eu salvo o token dele, eu mando ele de volta para a página home, só que, o "navegador" eu acho, não entende que ele está logado entende. Eu preciso dar um F5 na página, para dai aparecer a mensagem de usuário logado na página home Ou seja, eu preciso dar um reload na página Já tentei usar o windown.reload no código do login, porém, não dá certo O que eu tenho que fazer para a página Home ser realmente recarregada ?

@chiragshah4909 2 года назад

Hey I have a doubt How do we display the login data in profile page on clicking submit

@majuladarks.8708 2 года назад

Ótimo vídeo mano, só faltou uma legenda em pt-br.

@ewolz 2 года назад

Rookie question but why do I get blank pages when I refresh my app. I have to kind of restart my app or login again, to navigate within the app. But moment I refresh the page, it's blank. Is it as I haven't implemented useHistory throughout my app.

@mikealejandro3938 3 года назад

Hey pedro, i recently did like a facebook clone with MERN, but the problem i had is that ii couldn't upload anything in real time, like facebook, twitter or all the social media's app do, and it's something that is hard to find in courses, i think it's called web sockets, why don't you make a video about it? it would be asome dude !

@PedroTechnologies 3 года назад

Hey, I made some videos on socket.io! Here is one of them: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zWSvb5t_zH4.html

@sunilkumarkatta9062 2 года назад

Will the useHistory hook work if we don't use router concept?

@loriedimaano6483 3 года назад

How about when u logged in, the authorized will set to true?

@amauryperalta4364 2 года назад

This works well react router versión < 6, but how this would be with React router V6?

@dream_t3ch 3 года назад

thanks but ths method how can it be apply for 3 or more pages

@ranjansapkota7572 3 года назад

Hey Thanks for the video. But I am getting TypeError: Cannot read property 'push' of undefined for history.push, any idea?

@PedroTechnologies 3 года назад

Did you import the useHistory hook and declare the history variable?

@phantazzor 2 года назад

Is there a way to do it at once for many routes? Because is you need to redirect and pass authorized all the time it is very redundant

@yasselaissati 2 года назад

Did you find a way to do this?

@afxcrush41 2 года назад

I'm using a component in my router. All my routes has this Header, but I want a single Route to not have it... How can I achieve it?

@ghilesabchiche7342 3 года назад

I fkin love you

@thevloglife105 3 года назад

I got received error below message like this Line 6:19: React Hook "useHistory" is called in function "login" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter react-hooks/rules-of-hooks

@PedroTechnologies 3 года назад

Can you paste ur code here?

@thevloglife105 3 года назад

@@PedroTechnologies which one code are you asking?