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!

[@jeromelanteri6469]

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

[@Techsithtube]

Glad it helped!

[@brilliantchicken4873]

Beautifully explained, thank you

[@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

[@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!

[@beksultanomirzak9803]

Great, I liked your lesson ad explanation thank you

[@tradewithdani122]

tnx dude u solved all of my problems

[@ristolibera1295]

Very intuitive!

[@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.

[@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!

[@vivianeb90]

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

[@AakashShahFromGoogle]

This is a great video.

[@Techsithtube]

Thanks for watching Aakash

[@abeechr]

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

[@brahimelmokaouim4299]

Super react tutorial on youtube

[@KDcoo]

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

[@mickeyvershbow4814]

Great lesson, thanks so much!

[@NeoCoding]

Easy and useful as always. Thank you for enlightening.

[@rickyvu2388]

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

[@skullcan]

Nice video. Thanks!

[@oz9957]

thank you, that was useful ♥

[@scottsaccenti]

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

[@kannank3319]

Thanks for the video. Very much useful

[@catarinajg]

Great explanation, helped me a lot!! Thank you

[@manoharachennuru8151]

Great content. Thank you

[@preethamandakshatha60]

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

[@ajoypatra882]

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

[@majjisrinu3518]

Thanks for the video Sir

[@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.

[@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.

[@rajeevbhosle1580]

you are awesome

[@rizkyiqbal5959]

U save my life

[@roiunger7796]

Sir, I adore you

[@Techsithtube]

Thanks for watching!

[@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.

[@blazer511]

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

[@NoOne-zl4qb]

Thanks, just what I was looking for...

[@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?

[@nahuelaraujo6914]

Thank you very much sr! Very practical :D

[@erichkenupp2640]

Tu é um mito

[@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

[@prakharmittal6295]

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

[@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 👍

[@dungvu8790]

Thank you

[@gopideveloper4375]

Awesome. ThanQ

[@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.

[@dd13mm]

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

[@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.

[@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.

[@shaikkhaja2225]

Can you please make video on HashRouter.

[@ek4m81]

can you do video on difference between hashrouter and browserrouter?

[@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!

[@momentswithmanisha]

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

[@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

[@ErickG]

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

[@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:::: ===================

[@priyankaamahour]

Thank you so much!

[@kayan_dev]

replace can change z screen to b screen whithot going back

[@fernandoaugusto8394]

Thanks !!

[@tonyxavier3567]

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

[@muhammadqamar2283]

Make my day :)

[@hongkongbboy]

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

[@carter8679]

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

[@carter8679]

yeah, followed the tutorial exactly and state is undefined

[@Cloud-577]

why not use the browser back history ?

[@girishakk3249]

Sir you didn't explain about Redirect

[@carter8679]

repo for the code?

[@tubingforever]

Ladies and jellmen

[@DopamineMVWM]

go to 7:34 to skip all the nonsense

[@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...