React router with hooks ( useHistory useParam useLocation )
HTML-код
- Опубликовано: 15 окт 2019
- React-router-dom with Hooks, guild to routing in react js. new react-router version 5.1.0 and later.
#react #router #hooks
*My Udemy Courses
www.udemy.com/js-masterclass/
www.udemy.com/course/react-ho...
Follow me for technology updates
* / techsith
* / techsith
* / techsith1
* / 13677140
* / patelhemil
Help me translate this video.
* ruclips.net/user/timedtext_cs_...
Note: use translate.google.com/ to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance. 
Наука
** Please Join: facebook.com/groups/reactLearning/ **
Hey @techsith, do you have a Discord server ?
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...
Thank you! I really love your tutorials! Very easy straightforward and quick to implement :)
So glad I found this, been using v4 without the hooks and this implementation is far superior.
Thanks for Watching!
Easy and useful as always. Thank you for enlightening.
quick and clear. Perfect, thank you, i didn't know for useLocation and useHistory.
Glad it helped!
so much thanks for this "React router with hooks" awesome tutorial. TC
Thanks for watching!
Thanks, just what I was looking for...
Awesome video . The comparison between react hooks routing and normal normal is pretty clear here.
This was incredibly helpful. Thanks for this video. Subscribed.
Great explanation, helped me a lot!! Thank you
Excellent! I’d love to see you do a video on protected routes with hooks.
Thank you very much sr! Very practical :D
Thanks for the video. Very much useful
Great lesson, thanks so much!
Beautifully explained, thank you
Great, I liked your lesson ad explanation thank you
Nice video. Thanks!
Great content. Thank you
Very intuitive!
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.
Thanks for the video Sir
thank you, that was useful ♥
tnx dude u solved all of my problems
this tutrial very help me tank you . kepp going
Thanks for watching Mostafa. Keep on learning!
It would be great if you make a unit test with jest video for the same application using hooks you showed here.
Super react tutorial on youtube
Thanks a lot for this video series. Also can you make some videos on reselect, immer and react-boilerplate ?
Awesome. ThanQ
Thank you so much!
Thank you for the video. And how can the useLoccation() be used in a class Component ?
This is a great video.
Thanks for watching Aakash
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
Nice! :)
Learn a lot!!
It will be helpful if you can create some video on npx-create-library to reuse react components.
Ladies and gel man!
you are awesome
Make my day :)
Thanks !!
Could you please do an entire tutorial on use history, like the usage of go, replace, block, the action so on......
Tu é um mito
U save my life
Thank you
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
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 👍
Hi techsith, what is the best way to pass state to child pages, if the state requires http requests?
@techsith how to know the last location generated dynamically without passing it as a state prop on all pages?
Please make a video about unit testing using jest and enzyme for react application.
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.
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.
Can you please make video on HashRouter.
Which shortcut did you use here at 5:54 to change all words into "About"?
can you do video on difference between hashrouter and browserrouter?
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
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.
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?
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.
Sir, I adore you
Thanks for watching!
I don't understand why you need to use fragment/empty tag at 12:20
sir please make a simple website using react hooks.these things are asking by interviewer now a days.. thanks
Good to know that that is being asked . I will make tutorial on that.
Please do a video on how to use API on react like there is ways axios Or ajax call which are better.
Thanks for watching Rishi, I will make a video on AJAX calls.
Mind sharing your vs code setup? Looks really good!
github.com/gitmil/new-react-router-with-hooks
@@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!
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 :)
never mind got my answer "this.props.location.pathname" ty
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::::
===================
Does useParams come from react-router or react-router-dom
replace can change z screen to b screen whithot going back
Switch and useHistory are deprecated, I'm looking for the replacement for withRouter
why not use the browser back history ?
repo for the code?
Sir you didn't explain about Redirect
state is undefined when using the useLocation() hook. Anyone else getting this?
yeah, followed the tutorial exactly and state is undefined
@8:36 I got 404 (Not Found) instead of "User peter".
Ladies and jellmen
Another stingy programming guide that links no GitHub solution. Sweet
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...
go to 7:34 to skip all the nonsense