React router with hooks ( useHistory useParam useLocation )

[@Techsithtube]

** Please Join: facebook.com/groups/reactLearning/ **

[@elorabourel2320]

Hey @techsith, do you have a Discord server ?

[@davidfischer9186]

Replace just overwrites the location instead of adding another. So if they go to an invalid url, you can replace the url with a 404 then when they go back it takes them to the last valid url... that's what I've used it for...

[@celidee]

So glad I found this, been using v4 without the hooks and this implementation is far superior.

[@Techsithtube]

Thanks for Watching!

[@Anas_Alaqeel]

Replace can take you to another component or another route but you can't go back, because it replaces the whole location under the hood to only the current location, and this is useful when you want to make a login page and after the user logged in he cannot go back to the login page and there many cases for Replace but this is one of them

[@jeromelanteri6469]

quick and clear. Perfect, thank you, i didn't know for useLocation and useHistory.

[@Techsithtube]

Glad it helped!

[@akashpal9691]

Awesome video . The comparison between react hooks routing and normal normal is pretty clear here.

[@kim92se64]

so much thanks for this "React router with hooks" awesome tutorial. TC

[@Techsithtube]

Thanks for watching!

[@harshawijendra5903]

Love your tutorials. Can you do a series on Next.js ? Preferably with Redux. There's not a single solid series on Next. That'll be really helpful if you can.

[@brilliantchicken4873]

Beautifully explained, thank you

[@ristolibera1295]

Very intuitive!

[@beksultanomirzak9803]

Great, I liked your lesson ad explanation thank you

[@daliborpetric8288]

Replace is used for when you login for example, you push user to the Home page, and when he clicks back button in browser, it doesn't returns him to the login page/route. Just like deletes it from history.

[@tradewithdani122]

tnx dude u solved all of my problems

[@KDcoo]

Thank you! I really love your tutorials! Very easy straightforward and quick to implement :)

[@brahimelmokaouim4299]

Super react tutorial on youtube

[@NeoCoding]

Easy and useful as always. Thank you for enlightening.

[@digletwithn]

Ladies and gel man!

[@preethamandakshatha60]

Could you please do an entire tutorial on use history, like the usage of go, replace, block, the action so on......

[@scottsaccenti]

This was incredibly helpful. Thanks for this video. Subscribed.

[@abeechr]

Excellent! I’d love to see you do a video on protected routes with hooks.

[@AakashShahFromGoogle]

It would be great if you make a unit test with jest video for the same application using hooks you showed here.

[@kylehenson2259]

this tutrial very help me tank you . kepp going

[@Techsithtube]

Thanks for watching Mostafa. Keep on learning!

[@skullcan]

Nice video. Thanks!

[@kannank3319]

Thanks for the video. Very much useful

[@mickeyvershbow4814]

Great lesson, thanks so much!

[@rizkyiqbal5959]

U save my life

[@AakashShahFromGoogle]

This is a great video.

[@Techsithtube]

Thanks for watching Aakash

[@anacatarinagoncalves8714]

Great explanation, helped me a lot!! Thank you

[@dd13mm]

Thank you for the video. And how can the useLoccation() be used in a class Component ?

[@gwenaeloppitz3972]

Do you also explain this for typescript? My main struggle is that I find really little tutos for typescript in general and while the advantage it provides is great, it has a lot of pain-in-the ass features for learners

[@Techsithtube]

I would suggest to understand the concept in javaScript and add the types on the top. so that you are not confused with both. Also in typescript there is type any. so just start with javaScript and type any and as you have more requirement, add more types.

[@ajoypatra882]

Learn a lot!! It will be helpful if you can create some video on npx-create-library to reuse react components.

[@oz9957]

thank you, that was useful ♥

[@roiunger7796]

Sir, I adore you

[@Techsithtube]

Thanks for watching!

[@adnantariq3346]

Sooo How would I use something like a useLocation in a CLASS component? and if that answer is, we don't use such hooks in a class, and only in a functional component. What or how do i implement that in a Class component.... Anyways thanks for sharing your insights, love and I mean LOVE this channel :)

[@adnantariq3346]

never mind got my answer "this.props.location.pathname" ty

[@vivianeb90]

Which shortcut did you use here at 5:54 to change all words into "About"?

[@rajeevbhosle1580]

you are awesome

[@majjisrinu3518]

Thanks for the video Sir

[@prachigarg6641]

In WithRouter HOC, how can I get the previous page url? And what will be the previous page URL if I directly hit at my website? How should I handle this edge case?

[@blazer511]

Hi techsith, what is the best way to pass state to child pages, if the state requires http requests?

[@manoharachennuru8151]

Great content. Thank you

[@nahuelaraujo6914]

Thank you very much sr! Very practical :D

[@NoOne-zl4qb]

Thanks, just what I was looking for...

[@rickyvu2388]

I don't understand why you need to use fragment/empty tag at 12:20

[@prakharmittal6295]

@techsith how to know the last location generated dynamically without passing it as a state prop on all pages?

[@erichkenupp2640]

Tu é um mito

[@gopideveloper4375]

Awesome. ThanQ

[@ek4m81]

can you do video on difference between hashrouter and browserrouter?

[@mahendranath2504]

precise, to the point, clear, thank you so much,,, can you do a video on best practice in react, I like you content its great, A happy subscriber, can you do a video on reacting tool-kit pls, a concept like createAsyncThunk, createEnityAbopter, i has some goodies like reselect, thunk and state normalization, thanks for the video 👍

[@ABHISHEKKUMAR-gp8ls]

sir please make a simple website using react hooks.these things are asking by interviewer now a days.. thanks

[@Techsithtube]

Good to know that that is being asked . I will make tutorial on that.

[@rishikumar3076]

Please do a video on how to use API on react like there is ways axios Or ajax call which are better.

[@Techsithtube]

Thanks for watching Rishi, I will make a video on AJAX calls.

[@ErickG]

Does useParams come from react-router or react-router-dom

[@saktikantasenapati2508]

Thanks a lot for this video series. Also can you make some videos on reselect, immer and react-boilerplate ?

[@mrmatt8998]

really handy hooks when we need location and params without withRouter HOC. want to try personally but i haven't change or adopt hooks yet so it can't be done in class components

[@dungvu8790]

Thank you

[@quickindiarecipe]

I am having issues with react router e.g. I am loading product data from api in my route /products and I want to keep it even If I change route. e.g. if I go back to /about and then come back to /products route the API call in useEffect should not happen again as it has the same data as previous but it keep on fetching the data everytime I visit the the /product route. Although if I use react-query the issue seems to be solved. I don't know how to overcome that issue. Using localstorage seems to be the solution but react-query doesn't use that still manages to keep the results intact.

[@shaikkhaja2225]

Can you please make video on HashRouter.

[@priyankaamahour]

Thank you so much!

[@GMERT]

Please can you make a video on linking thank you page to emailjs code. I have been having issues with that for more than 3weeks and no video of that nature on youtube.

[@momentswithmanisha]

Please make a video about unit testing using jest and enzyme for react application.

[@reinvanimschoot3314]

Mind sharing your vs code setup? Looks really good!

[@Techsithtube]

github.com/gitmil/new-react-router-with-hooks

[@reinvanimschoot3314]

@@Techsithtube I think you misunderstood me. I'm looking for your VS Code setup, as in the color scheme and plugins etc. Like your settings.json in VS Code. Cheers!

[@fernandoaugusto8394]

Thanks !!

[@muhammadqamar2283]

Make my day :)

[@DEV_XO]

Nice! :)

[@karthicks2581]

Hi Sir, I have a small doubt, In my application in dashboard page or mapview page or any page while hitting refresh button, i need to redirect to login page, how can i handle page refresh functionality and re render my app components App Component:::: ===================

[@tonyxavier3567]

Switch and useHistory are deprecated, I'm looking for the replacement for withRouter

[@Cloud-577]

why not use the browser back history ?

[@kayan_dev]

replace can change z screen to b screen whithot going back

[@girishakk3249]

Sir you didn't explain about Redirect

[@carter8679]

repo for the code?

[@carter8679]

state is undefined when using the useLocation() hook. Anyone else getting this?

[@carter8679]

yeah, followed the tutorial exactly and state is undefined

[@hongkongbboy]

@8:36 I got 404 (Not Found) instead of "User peter".

[@tubingforever]

Ladies and jellmen

[@livingjoke3083]

Another stingy programming guide that links no GitHub solution. Sweet

[@ionitaa]

React router is a JOKE(R)! On one project that started way back (in the V2 days) we use the old history on our redux action creators for async redirects. So I guess we're fucked. WE CAN'T UPGRADE THE ROUTER WITHOUT REWRITING VERY ACTION CREATOR THAT USES HISTORY and every component that now has to pass it down to the action creator itself...

[@DopamineMVWM]

go to 7:34 to skip all the nonsense